/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLES & THEME
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-hover: #F5F5F5;
  --bg-section: #F8F8F8;
  --text: #1A1A1A;
  --text-secondary: #666666;
  --text-muted: #999999;
  --border: #E8E8E8;
  --border-light: #F0F0F0;
  --accent: #2D6B4D;
  --accent-light: #E8F5EE;
  --accent-hover: #245A3F;
  --diff-positive: #444444;
  --red: #C0392B;
  --red-light: #FDEDEC;
  --blue: #2471A3;
  --blue-light: #EBF5FB;
  --yellow: #D4AC0D;
  --yellow-light: #FEF9E7;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
  --radius: 10px;
  --radius-sm: 6px;
  --mono: 'Space Mono', monospace;
  --term: 'Jersey 10', 'Courier New', monospace;
  --sans: 'DM Sans', -apple-system, sans-serif;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #0D0D0D;
  --bg-card: #161616;
  --bg-hover: #1E1E1E;
  --bg-section: #1A1A1A;
  --text: #E8E8E8;
  --text-secondary: #AAAAAA;
  --text-muted: #666666;
  --border: #2A2A2A;
  --border-light: #222222;
  --accent: #4ADE80;
  --accent-light: #0D2818;
  --accent-hover: #22C55E;
  --diff-positive: #4ADE80;
  --red: #EF4444;
  --red-light: #1C0D0D;
  --blue: #60A5FA;
  --blue-light: #0D1520;
  --yellow: #FACC15;
  --yellow-light: #1A1708;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background var(--transition), color var(--transition);
  min-height: 100vh;
}

/* Global text overflow handling */
.card-body, .spec-value, .resource-item, .node-settings, .setting-value, .diff-val, .prompt-text, .note-text {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Mobile touch fixes */
button, a, .card-header, .stage-name, .stats-pack-header, .mode-toggle-btn, .dropzone {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 999;
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: #4b5563;
  transform: translateY(-2px);
}
.scroll-to-top:active {
  transform: translateY(0);
}
.scroll-to-top svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
[data-theme="dark"] .scroll-to-top {
  background: var(--accent);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .scroll-to-top:hover {
  background: var(--accent-hover);
}
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, background 0.2s ease;
}
header.header-hidden {
  transform: translateY(-100%);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.logo-icon {
  font-size: 22px;
}
.logo-text {
  font-family: var(--term);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Resources Dropdown */
.resources-wrapper {
  position: relative;
}
.resources-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.resources-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}
.resources-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  z-index: 50;
  overflow: hidden;
}
.resources-dropdown.open { display: block; }
.resources-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 10px 14px 4px;
}
.resources-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: var(--text);
}
.resources-link:hover { background: var(--bg-hover); }
.resources-link .rl-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.resources-link .rl-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.resources-link .rl-icon-svg svg {
  width: 14px;
  height: 14px;
}
.resources-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Theme Toggle */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--border);
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.theme-toggle:hover {
  border-color: var(--text-muted);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .theme-toggle {
  background: #333;
  border-color: #444;
}
[data-theme="dark"] .toggle-thumb {
  transform: translateX(24px);
  background: #555;
}
.toggle-icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .toggle-icon { stroke: #ccc; }
.toggle-icon-sun { display: block; }
.toggle-icon-moon { display: none; }
[data-theme="dark"] .toggle-icon-sun { display: none; }
[data-theme="dark"] .toggle-icon-moon { display: block; }

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT WITH SIDEBARS
   ═══════════════════════════════════════════════════════════════ */
.page-layout {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 0;
  min-height: calc(100vh - 60px);
}
.sidebar {
  padding: 24px 12px;
  position: sticky;
  top: 60px;
  height: fit-content;
  max-height: calc(100vh - 80px);
}
.ad-placeholder {
  background: var(--bg-section);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 0;
}

/* ASCII Banner */
.ascii-banner {
  text-align: center;
  padding: 90px 0 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.ascii-banner pre {
  font-family: var(--mono);
  line-height: 1.15;
  color: #1A1A1A;
  display: inline-block;
  text-align: left;
  letter-spacing: 0;
  white-space: pre;
  margin: 0;
}
.ascii-banner .ascii-detective {
  font-size: 8px;
  margin-bottom: 16px;
}
.ascii-banner .ascii-title {
  font-size: 10px;
}
.ascii-banner .ascii-line {
  display: block;
  white-space: pre;
}
.ascii-banner .ascii-char {
  display: inline-block;
  position: relative;
  top: 0;
}
.ascii-banner .mode-toggle {
  margin-top: 20px;
  margin-bottom: 0;
}
[data-theme="dark"] .ascii-banner pre {
  color: var(--accent);
}
.ascii-subtitle {
  font-family: var(--term);
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 12px;
  margin-bottom: 16px;
  letter-spacing: 3px;
}

@media (max-width: 1024px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   UPLOAD ZONE
   ═══════════════════════════════════════════════════════════════ */
.upload-section {
  text-align: center;
  padding: 10px 0 8px;
  margin-top: 0;
}
.upload-section h1 {
  font-family: var(--term);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.upload-section p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 12px;
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px 32px;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-card);
  position: relative;
}
.dropzone:hover, .dropzone.dragover {
  border-color: #999999;
  background: #F5F5F5;
}
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.dropzone.dragover {
  transform: scale(1.01);
}
.dropzone-icon {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}
.dropzone-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.dropzone-hint {
  font-size: 14px;
  color: var(--text-muted);
  font-family: var(--term);
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  /* Allow clicks but let drag events pass to parent */
}

/* ═══════════════════════════════════════════════════════════════
   PROCESSING STATE
   ═══════════════════════════════════════════════════════════════ */
.processing {
  text-align: center;
  padding: 60px 20px;
  display: none;
}
.processing.active { display: block; }
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: #666666;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
[data-theme="dark"] .spinner {
  border-top-color: var(--accent);
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-text {
  font-family: var(--term);
  font-size: 18px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   REPORT
   ═══════════════════════════════════════════════════════════════ */
.report { display: none; }
.report.active { display: block; }

/* Report Header / Actions */
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.report-title {
  font-family: var(--term);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
}
.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover {
  border-color: var(--text);
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover {
  opacity: 0.9;
}
.btn-new {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-new:hover {
  border-color: var(--text);
  color: var(--text);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover {
  border-color: var(--border);
}

/* Seed copy button (inline) */
.seed-copy-group {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
}
.seed-copy {
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
  transition: opacity 0.15s, color 0.15s;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--text-muted);
}
.seed-copy:hover {
  opacity: 1;
  color: var(--accent);
  background: var(--bg-hover);
}
[data-theme="dark"] .seed-copy {
  opacity: 0.7;
  color: var(--text-muted);
}
[data-theme="dark"] .seed-copy:hover {
  opacity: 1;
  color: var(--accent);
}
.seed-masked-val {
  font-family: var(--mono);
  color: var(--text-muted);
}

/* Share dropdown */
.share-wrapper {
  position: relative;
}
.share-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 50;
  overflow: hidden;
}
.share-dropdown.open { display: block; }
.share-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  background: none;
  color: var(--text);
  width: 100%;
  text-align: left;
  font-family: var(--sans);
}
.share-option:hover { background: var(--bg-hover); }

/* Report Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  transition: all var(--transition);
}
.card-header {
  padding: 14px 20px;
  font-family: var(--term);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
  color: #1A1A1A;
}
[data-theme="dark"] .card-header {
  color: var(--text);
}
.card-header:hover {
  background: var(--bg-hover);
}
.card-header .chevron {
  margin-left: auto;
  transition: transform var(--transition);
  font-size: 11px;
  color: var(--text-muted);
}
.card-header.collapsed .chevron {
  transform: rotate(-90deg);
}
.card-body {
  padding: 0 20px 16px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.card-body.collapsed {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}

/* File Specs */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* Allow shrinking */
}
.spec-label {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.spec-value {
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: break-word;
}
.spec-item-full {
  grid-column: 1 / -1;
}
.complexity-diamonds {
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.complexity-diamonds[data-rating="1"] { color: #999; }
.complexity-diamonds[data-rating="2"] { color: #71A0BE; }
.complexity-diamonds[data-rating="3"] { color: #D4AC0D; }
.complexity-diamonds[data-rating="4"] { color: #E67E22; }
.complexity-diamonds[data-rating="5"] { color: #C0392B; }
[data-theme="dark"] .complexity-diamonds[data-rating="1"] { color: #777; }
[data-theme="dark"] .complexity-diamonds[data-rating="2"] { color: #60A5FA; }
[data-theme="dark"] .complexity-diamonds[data-rating="3"] { color: #FACC15; }
[data-theme="dark"] .complexity-diamonds[data-rating="4"] { color: #FB923C; }
[data-theme="dark"] .complexity-diamonds[data-rating="5"] { color: #EF4444; }
.complexity-label {
  font-weight: 600;
  font-size: 14px;
}
.complexity-desc {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Quick Summary Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.stat-item {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  user-select: none;
}
.stat-item:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.stat-item.active {
  border-color: #999999;
  background: #F0F0F0;
}
[data-theme="dark"] .stat-item.active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.stat-item.no-detail {
  cursor: default;
  opacity: 0.85;
}
.stat-item.no-detail:hover {
  background: var(--bg-section);
  border-color: transparent;
}
.stat-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
}
[data-theme="dark"] .stat-value {
  color: var(--accent);
}
.stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Stats Accordion */
.stats-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-accordion.open {
  max-height: 2000px;
}
.stats-accordion-inner {
  padding: 16px 0 4px;
}
.stats-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stats-accordion-title {
  font-family: var(--term);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1A1A1A;
}
[data-theme="dark"] .stats-accordion-title {
  color: var(--accent);
}
.stats-accordion-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.stats-accordion-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.stats-detail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background var(--transition);
}
.stats-detail-item:hover {
  background: var(--bg-hover);
}
.stats-detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666666;
  flex-shrink: 0;
}
[data-theme="dark"] .stats-detail-dot {
  background: var(--accent);
}
.stats-detail-name {
  font-weight: 500;
  min-width: 0;
}
.stats-detail-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.stats-detail-empty {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Expandable Pack Items in Stats Accordion */
.stats-pack-item {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: background var(--transition);
}
.stats-pack-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  transition: background var(--transition);
}
.stats-pack-header:hover {
  background: var(--bg-hover);
}
.stats-pack-chevron {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}
.stats-pack-header.expanded .stats-pack-chevron {
  transform: rotate(90deg);
}
.stats-pack-github {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: #999999;
  transition: color var(--transition);
  text-decoration: none;
}
.stats-pack-github:hover {
  color: #1A1A1A;
}
[data-theme="dark"] .stats-pack-github {
  color: #4ADE80;
}
[data-theme="dark"] .stats-pack-github:hover {
  color: #86EFAC;
}
.stats-pack-github svg {
  width: 15px;
  height: 15px;
}
.stats-pack-nodes {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.stats-pack-nodes.open {
  max-height: 800px;
}
.stats-pack-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 34px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background var(--transition);
}
.stats-pack-node:last-child {
  padding-bottom: 8px;
}
.stats-pack-node:hover {
  background: var(--bg-hover);
}
.stats-pack-node-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.stats-pack-node-name {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
}

/* Models & Resources */
.resource-group {
  margin-bottom: 14px;
}
.resource-group:last-child { margin-bottom: 0; }
.resource-group-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.resource-group-label.folder-path {
  text-transform: none;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0;
}
.resource-item {
  padding: 6px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.resource-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666666;
  flex-shrink: 0;
}
[data-theme="dark"] .resource-item::before {
  background: var(--accent);
}
.resource-strength {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-section);
  padding: 2px 8px;
  border-radius: 4px;
}
.model-source-link {
  display: inline-flex;
  align-items: center;
  color: #999999;
  transition: color var(--transition);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 4px;
}
.model-source-link:hover {
  color: #1A1A1A;
}
[data-theme="dark"] .model-source-link {
  color: #4ADE80;
}
[data-theme="dark"] .model-source-link:hover {
  color: #86EFAC;
}
.model-source-link svg {
  width: 15px;
  height: 15px;
}
.model-search-ddg {
  opacity: 0.6;
}
.model-search-ddg:hover {
  opacity: 1;
}
/* Model badges */
.model-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.model-badge-comfy {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: white;
}
[data-theme="dark"] .model-badge-comfy {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

/* Prompts */
.prompt-block {
  margin-bottom: 14px;
  border-left: 3px solid #999999;
  padding: 12px 16px;
  background: var(--bg-section);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
[data-theme="dark"] .prompt-block {
  border-left-color: var(--accent);
}
.prompt-block.negative {
  border-left-color: var(--red);
}
.prompt-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prompt-label .positive-dot { color: #666666; }
[data-theme="dark"] .prompt-label .positive-dot { color: var(--accent); }
.prompt-label .negative-dot { color: var(--red); }
.prompt-source {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  margin-bottom: 6px;
}
.prompt-text {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Prompt connection notice (when text is found in connected nodes) */
.prompt-connection-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.prompt-connection-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.prompt-connection-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.prompt-connection-text strong {
  color: var(--text);
}

/* Empty prompt notice */
.prompt-empty-notice {
  background: var(--bg-section);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.prompt-empty-notice strong {
  color: var(--text-secondary);
}

/* Connected texts section */
.connected-texts-section {
  margin-top: 16px;
}
.connected-texts-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.connected-text-item {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.connected-text-item:last-child {
  margin-bottom: 0;
}
.connected-text-source {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Workflow Notes */
.notes-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}
.note-item {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--blue);
  transition: background var(--transition);
}
.note-item:last-child {
  margin-bottom: 0;
}
.note-item:hover {
  background: var(--bg-hover);
}
.note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.note-title {
  font-size: 13px;
  font-weight: 600;
}
.note-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
}
.note-text {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
}
[data-theme="dark"] .note-item {
  border-left-color: var(--blue);
}

/* Workflow Stages */
.stage-section {
  margin-bottom: 20px;
}
.stage-name {
  font-family: var(--term);
  font-size: 20px;
  font-weight: 400;
  color: #1A1A1A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}
.stage-name:hover {
  color: var(--text-secondary);
}
.stage-name .stage-chevron {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--transition);
  margin-left: auto;
}
.stage-name.collapsed .stage-chevron {
  transform: rotate(-90deg);
}
.stage-body {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-body.collapsed {
  max-height: 0 !important;
}
[data-theme="dark"] .stage-name {
  color: var(--accent);
}
.repo-group {
  margin-bottom: 18px;
  padding: 10px 0 6px 12px;
  border-left: 2px solid var(--border-light);
}
.comfyui-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.55;
}
.dep-install-toggle-btn .comfyui-icon {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}
.stat-label .comfyui-icon {
  width: 11px;
  height: 11px;
  opacity: 0.45;
  margin-left: 1px;
}
.repo-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.repo-github-link {
  display: inline-flex;
  align-items: center;
  color: #999999;
  transition: color var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}
.repo-github-link:hover {
  color: #1A1A1A;
}
[data-theme="dark"] .repo-github-link {
  color: #4ADE80;
}
[data-theme="dark"] .repo-github-link:hover {
  color: #86EFAC;
}
.repo-github-link svg {
  width: 14px;
  height: 14px;
}
.repo-clone-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--mono);
  background: var(--bg-section);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-muted);
  word-break: break-all;
}
.repo-clone-cmd:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .repo-clone-cmd {
  background: var(--accent-light);
  border-color: transparent;
  color: var(--accent);
}
[data-theme="dark"] .repo-clone-cmd:hover {
  background: rgba(74, 222, 128, 0.12);
  color: var(--accent-hover);
}
.repo-clone-cmd-text {
  flex: 1;
  min-width: 0;
}
.repo-clone-cmd-copy {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition);
}
.repo-clone-cmd:hover .repo-clone-cmd-copy {
  color: var(--text-secondary);
}
[data-theme="dark"] .repo-clone-cmd-copy {
  color: var(--accent);
}
.repo-clone-cmd-copy svg {
  width: 13px;
  height: 13px;
}
.repo-url {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: 8px;
}
.repo-url a {
  color: var(--text-muted);
  text-decoration: none;
}
.repo-url a:hover {
  color: #444444;
}
[data-theme="dark"] .repo-url a:hover {
  color: var(--accent);
}

/* Node Items */
.node-item {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  transition: background var(--transition);
}
.node-item:hover {
  background: var(--bg-hover);
}
.node-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.node-name {
  font-weight: 600;
  font-size: 13px;
}
.node-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
}
.node-class {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.node-settings {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}
.setting-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
}
.setting-key {
  font-family: var(--mono);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 100px;
}
.setting-value {
  word-break: break-word;
}
.setting-value.seed-masked {
  font-family: var(--mono);
  color: var(--text-muted);
}
.setting-value-model {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}

/* Repos Summary */
.repo-summary-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.repo-summary-item:last-child { border-bottom: none; }
.repo-summary-name {
  font-weight: 600;
  font-size: 14px;
}
.repo-summary-url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}
.repo-summary-url a {
  color: var(--text-muted);
  text-decoration: none;
}
.repo-summary-url a:hover { color: #444444; }
[data-theme="dark"] .repo-summary-url a:hover { color: var(--accent); }
.repo-summary-nodes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Unknown nodes badge */
.unknown-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--yellow-light);
  color: var(--yellow);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   PROMPT EDITOR
   ═══════════════════════════════════════════════════════════════ */
.prompt-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: all var(--transition);
  margin-left: auto;
}
.prompt-edit-btn:hover {
  color: var(--text);
  border-color: var(--text-secondary);
  background: var(--bg-hover);
}
.prompt-editor-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.prompt-editor-textarea:focus {
  border-color: #999999;
}
[data-theme="dark"] .prompt-editor-textarea:focus {
  border-color: var(--accent);
}
.prompt-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.prompt-editor-actions .btn-sm {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.prompt-editor-actions .btn-sm:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}
.prompt-editor-actions .btn-sm.btn-save {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.prompt-editor-actions .btn-sm.btn-save:hover {
  background: var(--text-secondary);
}
.prompt-export-bar {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.prompt-export-bar .btn-export {
  font-family: var(--term);
  font-size: 15px;
  padding: 8px 18px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.5px;
}
.prompt-export-bar .btn-export:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
}
.prompt-export-bar .btn-export:disabled {
  background: var(--border);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.prompt-export-bar .btn-export:disabled:hover {
  background: var(--border);
  border-color: var(--border);
  color: var(--text-muted);
}
.prompt-export-note {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════
   EDIT BAR (Fixed at bottom)
   ═══════════════════════════════════════════════════════════════ */
.edit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.edit-bar.active {
  display: flex;
}
.edit-bar-text {
  font-family: var(--term);
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.5px;
}
.edit-bar-btn {
  font-family: var(--term);
  font-size: 14px;
  padding: 8px 16px;
  border: 2px solid var(--text);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.5px;
}
.edit-bar-btn:hover {
  background: var(--text);
  color: var(--bg);
}
.edit-bar-btn.primary {
  background: var(--text);
  color: var(--bg);
}
.edit-bar-btn.primary:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
}
.edit-bar-btn.discard {
  border-color: var(--text-muted);
  color: var(--text-muted);
}
.edit-bar-btn.discard:hover {
  border-color: var(--red);
  color: var(--red);
  background: transparent;
}
[data-theme="dark"] .edit-bar {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   EDITABLE SETTINGS
   ═══════════════════════════════════════════════════════════════ */
.gen-settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.gen-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.gen-settings-title {
  font-family: var(--term);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.gen-settings-badge {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-section);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--mono);
}
.gen-settings-body {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.gen-setting-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gen-setting-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gen-setting-input {
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
}
.gen-setting-input:focus {
  outline: none;
  border-color: var(--text);
}
.gen-setting-input:hover {
  border-color: var(--text-muted);
}
.gen-setting-input.edited {
  border-color: var(--accent);
  background: var(--accent-light);
}
.gen-setting-input[readonly] {
  background: var(--bg-section);
  cursor: not-allowed;
  opacity: 0.7;
}
.gen-setting-seed {
  display: flex;
  gap: 8px;
}
.gen-setting-seed .gen-setting-input {
  flex: 1;
}
.gen-setting-copy {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gen-setting-copy svg {
  width: 18px;
  height: 18px;
  stroke: var(--text);
  stroke-width: 2;
  fill: none;
}
.gen-setting-copy:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.gen-setting-copy:hover svg {
  stroke: var(--accent);
}
.gen-setting-copy:focus {
  outline: none;
  border-color: var(--accent);
}
[data-theme="dark"] .gen-setting-copy {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .gen-setting-copy svg {
  stroke: var(--text-muted);
}
[data-theme="dark"] .gen-setting-copy:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
[data-theme="dark"] .gen-setting-copy:hover svg {
  stroke: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   DEPENDENCY CHECKLIST
   ═══════════════════════════════════════════════════════════════ */
.dep-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.dep-item:last-child { border-bottom: none; }
.dep-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: all var(--transition);
  background: var(--bg-card);
}
.dep-checkbox:checked {
  background: var(--text);
  border-color: var(--text);
}
.dep-checkbox:checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.dep-info {
  flex: 1;
  min-width: 0;
  transition: opacity var(--transition);
}
.dep-info.checked .dep-name,
.dep-info.checked .dep-url,
.dep-info.checked .dep-nodes {
  opacity: 0.4;
  text-decoration: line-through;
}
.dep-name {
  font-weight: 600;
  font-size: 14px;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.dep-url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
  transition: opacity var(--transition);
}
.dep-url a { color: var(--text-muted); text-decoration: none; }
.dep-url a:hover { color: #444444; }
[data-theme="dark"] .dep-url a:hover { color: var(--accent); }
.dep-nodes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  transition: opacity var(--transition);
}
.dep-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dep-copy-btn {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.dep-copy-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}
.dep-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.dep-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-section);
  border-radius: 3px;
  overflow: hidden;
}
.dep-progress-fill {
  height: 100%;
  background: var(--text);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.dep-progress-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dep-unknown-section {
  margin-top: 14px;
  padding: 12px;
  background: var(--yellow-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--yellow);
}
[data-theme="dark"] .dep-unknown-section {
  background: rgba(212, 172, 13, 0.08);
}
.dep-unknown-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.dep-unknown-list {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ── Model Checklist ──────────────────────────────────────────── */
.mc-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.mc-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-section);
  border-radius: 3px;
  overflow: hidden;
}
.mc-progress-fill {
  height: 100%;
  background: var(--text);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.mc-progress-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.mc-folder-section { margin-bottom: 16px; }
.mc-folder-section:last-child { margin-bottom: 0; }
.mc-folder-header {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 6px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.mc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.mc-item:last-child { border-bottom: none; }
.mc-item.mc-done .mc-path { opacity: 0.4; text-decoration: line-through; }
.mc-path {
  font-family: var(--mono);
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text);
}
.mc-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Dependency Explanation */
.dep-explainer {
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
}

/* Batch Install Toggle */
.dep-install-panels {
  margin-bottom: 18px;
}
.dep-install-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.dep-install-toggle-btn {
  font-family: var(--term);
  font-size: 14px;
  padding: 7px 18px;
  letter-spacing: 0.3px;
  border: none;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.dep-install-toggle-btn.active {
  background: var(--text);
  color: var(--bg);
}
.dep-install-toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text);
}
.dep-install-tab { display: none; }
.dep-install-tab.active { display: block; }
.dep-req-spinner {
  display: inline-block;
  animation: dep-spin 1.2s linear infinite;
}
@keyframes dep-spin { to { transform: rotate(360deg); } }
.dep-req-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.6;
}
.dep-req-status .req-ok { color: var(--accent); }
.dep-req-status .req-fail { color: var(--red); opacity: 0.7; }
.dep-req-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 8px;
}
.dep-req-download:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: var(--bg-hover);
}
.dep-install-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.dep-code-block {
  position: relative;
  background: #F0F0F0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid #E0E0E0;
}
[data-theme="dark"] .dep-code-block {
  background: #1A1A1A;
  border-color: var(--border);
}
.dep-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #E4E4E4;
  border-bottom: 1px solid #D5D5D5;
}
[data-theme="dark"] .dep-code-block-header {
  background: #222222;
  border-bottom-color: #333333;
}
.dep-code-lang {
  font-family: var(--mono);
  font-size: 10px;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dep-code-copy {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 10px;
  border: 1px solid #C0C0C0;
  border-radius: 3px;
  background: transparent;
  color: #666666;
  cursor: pointer;
  transition: all var(--transition);
}
.dep-code-copy:hover {
  background: #D8D8D8;
  border-color: #999999;
  color: #333333;
}
[data-theme="dark"] .dep-code-copy {
  border-color: #444444;
  color: #CCCCCC;
}
[data-theme="dark"] .dep-code-copy:hover {
  background: #333333;
  border-color: #666666;
  color: #FFFFFF;
}
.dep-code-pre {
  padding: 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: #333333;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .dep-code-pre {
  color: #E0E0E0;
}
.dep-code-pre .code-comment {
  color: #6A9955;
}
.dep-code-pre .code-cmd {
  color: #8B6914;
}
[data-theme="dark"] .dep-code-pre .code-cmd {
  color: #DCDCAA;
}
.dep-divider {
  height: 1px;
  background: var(--border-light);
  margin: 16px 0;
}
.dep-section-label {
  font-family: var(--term);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #1A1A1A;
  margin-bottom: 10px;
}
[data-theme="dark"] .dep-section-label {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   COMPARISON MODE
   ═══════════════════════════════════════════════════════════════ */
.compare-section { display: none; }
.compare-section.active { display: block; }
.compare-section {
  padding: 10px 0 8px;
  text-align: center;
}
.compare-title {
  font-family: var(--term);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-align: center;
}
.compare-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 12px;
  text-align: center;
}
.compare-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
}
.compare-dropzones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
  text-align: center;
}
@media (max-width: 640px) {
  .compare-dropzones { grid-template-columns: 1fr; }
}
.compare-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.compare-drop:hover,
.compare-drop.dragover {
  border-color: #999999;
  background: #F5F5F5;
}
[data-theme="dark"] .compare-drop:hover,
[data-theme="dark"] .compare-drop.dragover {
  border-color: var(--accent);
  background: rgba(45, 107, 77, 0.08);
}
.compare-drop.loaded {
  border-color: #999999;
  border-style: solid;
  background: #F0F0F0;
}
[data-theme="dark"] .compare-drop.loaded {
  border-color: var(--accent);
  background: rgba(45, 107, 77, 0.08);
}
.compare-drop-label {
  font-family: var(--term);
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.compare-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.compare-drop-file {
  font-size: 12px;
  font-family: var(--mono);
  color: #444444;
  margin-top: 6px;
  word-break: break-all;
}
[data-theme="dark"] .compare-drop-file {
  color: var(--accent);
}
.compare-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.compare-btn {
  display: block;
  flex: 1;
  font-family: var(--term);
  font-size: 18px;
  padding: 11px;
  letter-spacing: 1px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.compare-btn:hover:not(:disabled) {
  border-color: var(--text);
}
.compare-btn:not(:disabled) {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.compare-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Merge Section */
.merge-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.merge-instructions {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.merge-toolbar {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 20px;
}
.merge-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.merge-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.merge-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.merge-base-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.merge-base-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.merge-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: 12px;
}
.merge-base-select {
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}
.merge-base-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Selectable diff cells */
.diff-val.selectable {
  cursor: pointer;
  transition: all 0.15s ease;
  border: 2px solid transparent;
}
.diff-val.selectable:hover {
  border-color: var(--text-muted);
}
.diff-val.selectable.selected {
  border-color: var(--text) !important;
}
[data-theme="dark"] .diff-val.selectable.selected {
  border-color: #FFFFFF !important;
}
.diff-val.selectable.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.diff-val.selectable.disabled:hover {
  border-color: transparent;
}
.diff-row-disabled {
  opacity: 0.92;
}
.diff-row-disabled .diff-key::after {
  content: ' (not selectable)';
  font-size: 10px;
  color: var(--text-muted);
  font-weight: normal;
}

.compare-results { display: none; text-align: left; }
.compare-results.active { display: block; }
.diff-section { margin-bottom: 20px; text-align: left; }
.diff-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .diff-section-title {
  color: var(--text);
}
.diff-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
  text-align: left;
}
.diff-row:last-child { border-bottom: none; }
.diff-key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: left;
}
.diff-val {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  word-break: break-word;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
.diff-val.center-check {
  text-align: left;
  font-size: 15px;
}
/* Match = green (both have it) */
.diff-val.match { background: var(--accent-light); }
[data-theme="dark"] .diff-val.match { background: rgba(45, 107, 77, 0.15); color: var(--accent); }
/* Differ = red (values are different) */
.diff-val.differ { background: var(--red-light); }
[data-theme="dark"] .diff-val.differ { background: rgba(192, 57, 43, 0.1); color: var(--red); }
/* Mismatch = yellow (one has it, one doesn't) */
.diff-val.mismatch { background: var(--yellow-light); }
[data-theme="dark"] .diff-val.mismatch { background: rgba(212, 172, 13, 0.15); }
/* Changed = red (settings changed) */
.diff-val.changed { background: var(--red-light); }
[data-theme="dark"] .diff-val.changed { background: rgba(192, 57, 43, 0.1); color: var(--red); }
/* Added = green in dark only */
.diff-val.added { background: #F0F0F0; }
[data-theme="dark"] .diff-val.added { background: rgba(45, 107, 77, 0.1); color: var(--accent); }
/* Removed = red */
.diff-val.removed { background: var(--red-light); }
[data-theme="dark"] .diff-val.removed { background: rgba(192, 57, 43, 0.1); color: var(--red); }
.diff-val .diff-hl {
  background: rgba(212, 172, 13, 0.35);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}
[data-theme="dark"] .diff-val .diff-hl {
  background: rgba(212, 172, 13, 0.3);
}
.diff-val.removed .diff-hl {
  background: rgba(192, 57, 43, 0.2);
  text-decoration: line-through;
  text-decoration-color: var(--red);
}
[data-theme="dark"] .diff-val.removed .diff-hl {
  background: rgba(192, 57, 43, 0.25);
  text-decoration-color: var(--red);
}
.diff-val.added .diff-hl {
  background: rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
[data-theme="dark"] .diff-val.added .diff-hl {
  background: rgba(45, 107, 77, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   COMPARE SETTINGS - COLOR CODED ROWS
   ═══════════════════════════════════════════════════════════════ */
/* Shared nodes with matching values = no special color on light, subtle on dark */
.diff-row.row-match {
  background: transparent;
}
[data-theme="dark"] .diff-row.row-match {
  background: rgba(76, 175, 80, 0.08);
}
/* Yellow = both have it, values differ */
.diff-row.row-differ {
  background: rgba(255, 193, 7, 0.1);
}
[data-theme="dark"] .diff-row.row-differ {
  background: rgba(255, 193, 7, 0.15);
}
/* Blue = only in File A */
.diff-row.row-only-a {
  background: rgba(33, 150, 243, 0.08);
}
[data-theme="dark"] .diff-row.row-only-a {
  background: rgba(33, 150, 243, 0.12);
}
/* Orange = only in File B */
.diff-row.row-only-b {
  background: rgba(255, 152, 0, 0.08);
}
[data-theme="dark"] .diff-row.row-only-b {
  background: rgba(255, 152, 0, 0.12);
}

/* Row checkmark column for shared nodes */
.diff-row-check {
  width: 24px;
  text-align: center;
  color: var(--accent);
  font-size: 14px;
  padding-top: 4px;
}
.diff-row-check.empty {
  color: transparent;
}

/* Updated grid for 4 columns (check, key, val A, val B) */
.diff-row.has-check {
  grid-template-columns: 24px 200px 1fr 1fr;
}
.diff-header.has-check {
  grid-template-columns: 24px 200px 1fr 1fr;
}

/* Settings filter key and controls */
.settings-filter-container {
  margin-bottom: 16px;
}
.settings-key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
}
.settings-key-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.settings-key-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.settings-key-dot.match { background: rgba(76, 175, 80, 0.5); }
.settings-key-dot.differ { background: rgba(255, 193, 7, 0.5); }
.settings-key-dot.only-a { background: rgba(33, 150, 243, 0.5); }
.settings-key-dot.only-b { background: rgba(255, 152, 0, 0.5); }
.settings-key-check {
  color: var(--accent);
  font-size: 14px;
}

/* Filter toggles */
.settings-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.settings-filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.settings-filter-toggle:hover {
  border-color: var(--text-muted);
}
.settings-filter-toggle.active {
  background: var(--bg-card);
  border-color: var(--text);
}
.settings-filter-toggle .filter-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.settings-filter-toggle .filter-count {
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.settings-filter-toggle .filter-switch {
  width: 28px;
  height: 16px;
  background: var(--border);
  border-radius: 8px;
  position: relative;
  transition: background 0.15s ease;
}
.settings-filter-toggle .filter-switch::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.15s ease;
}
.settings-filter-toggle.active .filter-switch {
  background: var(--text);
}
[data-theme="dark"] .settings-filter-toggle.active .filter-switch {
  background: var(--accent);
}
.settings-filter-toggle.active .filter-switch::after {
  transform: translateX(12px);
}
/* Clear filters button */
.clear-filters-btn {
  font-family: var(--sans);
  font-size: 11px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.clear-filters-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Hide rows based on filter */
.diff-row.filter-hidden {
  display: none !important;
}

/* Compare merge bar (bottom sticky) */
.compare-merge-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.compare-merge-bar.active {
  display: flex;
}
[data-theme="dark"] .compare-merge-bar {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
.compare-merge-bar-text {
  font-family: var(--term);
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.5px;
}
.compare-merge-bar-count {
  background: var(--accent-light);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.diff-header {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  text-align: left;
}
.diff-header span {
  text-align: left;
}
.diff-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.diff-stat {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: left;
}
.diff-stat-val { font-family: var(--term); font-size: 22px; }
.diff-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.diff-changes-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.diff-changes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.diff-changes-header:hover {
  background: var(--bg-hover);
}
.diff-changes-count {
  font-size: 14px;
  font-weight: 600;
}
.diff-changes-count span {
  color: var(--red);
  font-weight: 700;
}
.diff-changes-chevron {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.diff-changes-header.open .diff-changes-chevron {
  transform: rotate(180deg);
}
.diff-changes-body {
  display: none;
  padding: 0 20px 16px;
}
.diff-changes-body.open {
  display: block;
}
.diff-changes-group {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}
.diff-changes-group:last-child {
  margin-bottom: 0;
}
.diff-changes-category {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 10px 14px 6px;
}
.diff-change-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 14px 6px 14px;
  line-height: 1.5;
  transition: background var(--transition);
  position: relative;
}
.diff-change-item:last-child {
  padding-bottom: 10px;
}
.diff-change-item:hover {
  background: var(--bg-hover);
}
.diff-change-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
[data-theme="dark"] .diff-change-item::before {
  background: var(--accent);
}
.diff-change-added {
  color: var(--accent);
}
.diff-change-removed {
  color: var(--red);
  text-decoration: line-through;
  opacity: 0.7;
}
.mode-toggle {
  display: flex;
  gap: 0;
  margin: 40px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.mode-toggle-btn {
  font-family: var(--term);
  font-size: 15px;
  padding: 8px 20px;
  letter-spacing: 0.5px;
  border: none;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.mode-toggle-btn.active {
  background: var(--text);
  color: var(--bg);
}
.mode-toggle-btn:hover:not(.active) {
  color: var(--text);
  background: var(--bg-hover);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.above-bar {
  bottom: 80px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer {
  text-align: center;
  padding: 8px 24px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  max-width: 1280px;
  margin: 0 auto;
}
footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}
footer a:hover { color: #444444; }
[data-theme="dark"] footer a:hover { color: var(--accent); }
.footer-brand {
  font-family: var(--term);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
}
.footer-sep {
  margin: 0 4px;
  color: var(--text-muted);
}
  
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .upload-section h1 { font-size: 22px; }
  .dropzone { padding: 32px 20px; }
  .specs-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .report-header { flex-direction: column; align-items: flex-start; }
  .report-actions { width: 100%; }
  .ascii-banner .ascii-detective { font-size: 5px; line-height: 1.0; }
  .ascii-banner .ascii-title { font-size: 7px; line-height: 1.0; }
  .resources-btn span.res-label { display: none; }
  
  /* Fix sign-in button to fit on one line */
  .auth-trigger { 
    font-size: 11px; 
    padding: 5px 10px;
    white-space: nowrap;
  }
  
  /* Hamburger dropdown - full width, scrollable */
  .resources-dropdown {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  /* Header spacing on mobile */
  .header-right { gap: 8px; }
  .header-auth { gap: 8px; }
  
  /* User menu on mobile - icon only */
  .user-menu { gap: 8px; }
  .user-signout { 
    font-size: 10px; 
    padding: 3px 8px;
  }
}

/* Print / PDF styles */
@media print {
header, .report-actions, .upload-section, .dropzone, footer, .theme-toggle, .sidebar, .ascii-banner, .resources-wrapper, .mode-toggle, .toast { display: none !important; }
  .page-layout { grid-template-columns: 1fr !important; }
  .card { break-inside: avoid; }
  .report { display: block !important; }
  body { background: #fff; color: #000; }
}
  
.content-warning-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
.content-warning-overlay.active { display: flex; }
/* Additional blur on the page content itself when flagged */
body.content-flagged #report,
body.content-flagged #processing {
  filter: blur(25px) brightness(0.3);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 0.3s ease;
}
.content-warning-box {
  background: var(--bg-card);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 0 60px rgba(192,57,43,0.3);
}
.content-warning-box h2 {
  font-family: var(--mono);
  color: var(--red);
  font-size: 16px;
  margin-bottom: 12px;
}
.content-warning-box p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}
.content-warning-box a { color: var(--accent); text-decoration: underline; }
.content-warning-box .cw-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.content-warning-box button {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}
.content-warning-box button:hover { background: var(--bg-hover); }
.content-warning-box button.cw-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.content-warning-box button.cw-primary:hover { opacity: 0.9; }    

/* ═══════════════════════════════════════════════════════════════
   JSON CHECKER SECTION - Content Classification Display
   ═══════════════════════════════════════════════════════════════ */
.json-checker {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.json-checker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.json-checker-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.json-checker-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.json-checker-badge.safe {
  background: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
}
.json-checker-badge.explicit {
  background: rgba(255, 152, 0, 0.15);
  color: #FF9800;
}
.json-checker-badge.suspicious {
  background: rgba(255, 193, 7, 0.15);
  color: #d4a500;
}
.json-checker-badge.blocked {
  background: rgba(244, 67, 54, 0.15);
  color: #F44336;
}
[data-theme="dark"] .json-checker-badge.safe { background: rgba(76, 175, 80, 0.2); }
[data-theme="dark"] .json-checker-badge.explicit { background: rgba(255, 152, 0, 0.2); }
[data-theme="dark"] .json-checker-badge.suspicious { background: rgba(255, 193, 7, 0.2); color: #FFC107; }
[data-theme="dark"] .json-checker-badge.blocked { background: rgba(244, 67, 54, 0.2); }

.json-checker-body {
  padding: 16px;
}
.json-checker-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.json-checker-row:last-child { margin-bottom: 0; }
.json-checker-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 110px;
  padding-top: 1px;
}
.json-checker-value {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}
.json-checker-value.success { color: #4CAF50; }
.json-checker-value.warning { color: #FF9800; }
.json-checker-value.error { color: #F44336; }

.json-checker-flags {
  list-style: none;
  padding: 0;
  margin: 0;
}
.json-checker-flags li {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
}
.json-checker-flags li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.json-checker-notice {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.json-checker-notice.warning {
  border-color: rgba(255, 152, 0, 0.4);
  background: rgba(255, 152, 0, 0.06);
}
.json-checker-notice.error {
  border-color: rgba(244, 67, 54, 0.4);
  background: rgba(244, 67, 54, 0.06);
}
.json-checker-disclaimer {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Content warnings list */
.json-checker-warnings {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 12px;
}
.json-checker-warnings-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.json-checker-warnings ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.json-checker-warnings li {
  font-size: 11px;
  color: var(--text);
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.4;
}
.json-checker-warnings li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  font-size: 10px;
}
.json-checker-warnings.explicit li::before { content: '🔞'; }
.json-checker-warnings.blocked li::before { content: '⛔'; color: var(--red); }

/* SFW Converter button */
.sfw-converter-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sfw-converter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sfw-converter-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.sfw-converter-btn:disabled {
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.sfw-converter-desc {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* Redacted text styling */
.redacted-word {
  background: #1a1a1a;
  color: #1a1a1a;
  padding: 0 2px;
  border-radius: 2px;
  font-family: var(--mono);
  user-select: none;
}
[data-theme="light"] .redacted-word {
  background: #222;
  color: #222;
}

/* Explicit prompt notice */
.prompt-explicit-notice {
  background: rgba(255, 152, 0, 0.08);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.prompt-explicit-notice strong {
  color: #FF9800;
}
.prompt-explicit-notice .notice-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* Disable edit button for explicit content */
.prompt-block.explicit-content .prompt-edit-btn {
  display: none;
}

/* Blocked content - thick red border */
.json-checker.blocked {
  border: 3px solid var(--red);
  box-shadow: 0 0 20px rgba(244, 67, 54, 0.15);
}
.json-checker.blocked .json-checker-header {
  background: rgba(244, 67, 54, 0.08);
  border-bottom-color: rgba(244, 67, 54, 0.3);
}

/* Explicit content - orange accent */
.json-checker.explicit {
  border-color: rgba(255, 152, 0, 0.5);
}
.json-checker.explicit .json-checker-header {
  background: rgba(255, 152, 0, 0.06);
}

/* Suspicious content - yellow accent */
.json-checker.suspicious {
  border-color: rgba(255, 193, 7, 0.5);
}
.json-checker.suspicious .json-checker-header {
  background: rgba(255, 193, 7, 0.06);
}

/* Hidden prompts notice */
.prompts-hidden-notice {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.prompts-hidden-notice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODAL & USER MENU
   ═══════════════════════════════════════════════════════════════ */
.auth-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
[data-theme="dark"] .auth-modal-overlay { background: rgba(0,0,0,0.7); }
.auth-modal-overlay.active { display: flex; }

.auth-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 440px;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
[data-theme="dark"] .auth-modal { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

.auth-ascii { text-align: center; padding: 32px 20px 0; }
.auth-ascii pre {
  font-family: var(--mono);
  font-size: 6px;
  line-height: 1.15;
  color: var(--text);
  display: inline-block;
  margin: 0;
}
[data-theme="dark"] .auth-ascii pre { color: #4ADE80; }

.auth-header {
  padding: 14px 20px;
  font-family: var(--term);
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.auth-body { padding: 20px 24px 24px; }

.auth-free-notice {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.auth-free-notice strong { color: var(--text); }
[data-theme="dark"] .auth-free-notice { background: #0D2818; border-color: #4ADE80; }
[data-theme="dark"] .auth-free-notice strong { color: #4ADE80; }

.auth-limit-badge {
  background: var(--red-light);
  color: var(--red);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 19px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}
.auth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-btn:hover {
  border-color: var(--text);
}
.auth-btn-google { background: var(--bg-card); color: var(--text); }
.auth-btn-github { background: var(--bg-card); color: var(--text); }

.auth-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { padding: 0 12px; }

.auth-guest-btn { background: transparent; color: var(--text-secondary); font-size: 13px; }
.auth-guest-btn:hover { 
  border-color: var(--text);
  color: var(--text);
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.auth-switch a { color: var(--text); text-decoration: none; font-weight: 500; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }
[data-theme="dark"] .auth-switch a { color: #4ADE80; }

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-close:hover { color: var(--text); background: var(--bg-section); }
.auth-modal-inner { position: relative; }

.header-auth { display: flex; align-items: center; gap: 12px; }
.auth-trigger {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--sans);
}
.auth-trigger:hover { background: var(--bg-hover); }

.user-menu { display: none; align-items: center; gap: 12px; font-family: var(--sans); }
.user-menu.active { display: flex; }
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-name {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-signout {
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.user-signout:hover { background: var(--bg-hover); }

.my-files-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}
.my-files-link:hover { background: var(--bg-hover); }

.save-workflow-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.save-workflow-btn:hover {
  border-color: var(--text);
}
.save-workflow-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 600px) {
  .user-name { display: none; }
  .auth-modal { width: 95%; }
  .auth-ascii pre { font-size: 5px; }
  .my-files-link span { display: none; }
  .my-files-link { padding: 6px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   TERMS AGREEMENT MODAL
   ═══════════════════════════════════════════════════════════════ */
.terms-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  justify-content: center;
  align-items: center;
}
[data-theme="dark"] .terms-modal-overlay { background: rgba(0,0,0,0.85); }
.terms-modal-overlay.active { display: flex; }

.terms-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.terms-modal-header {
  padding: 16px 20px;
  font-family: var(--term);
  font-size: 18px;
  letter-spacing: 1px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.terms-modal-body {
  padding: 16px 20px;
}

.terms-text-box {
  height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg);
  font-size: 8px;
  line-height: 1.3;
  font-family: var(--mono);
  color: var(--text-secondary);
}

.terms-text-box h3 {
  font-size: 9px;
  margin: 8px 0 4px;
  color: var(--text);
}

.terms-text-box h3:first-child {
  margin-top: 0;
}

.terms-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 10px;
}
.terms-loading span {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.terms-content-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.terms-content-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.terms-content-section h3 {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.terms-content-section h2 {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  margin: 10px 0 4px;
}
.terms-content-section p,
.terms-content-section li {
  font-size: 8px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.terms-content-section ul {
  padding-left: 12px;
  margin: 4px 0;
}
.terms-content-section .important {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 6px 8px;
  margin: 6px 0;
  font-size: 8px;
}

.terms-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.terms-acknowledgment {
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-muted);
  font-family: var(--mono);
}

.terms-btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.terms-btn {
  padding: 8px 20px;
  font-family: var(--term);
  font-size: 12px;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
}

.terms-btn-agree {
  color: #22C55E;
  border: 2px solid #22C55E;
}
.terms-btn-agree:hover {
  background: #22C55E;
  color: white;
}

.terms-btn-deny {
  color: #DC2626;
  border: 2px solid #DC2626;
}
.terms-btn-deny:hover {
  background: #DC2626;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   NODE GRAPH VISUALIZER
   ═══════════════════════════════════════════════════════════════ */

/* Outer card body — normal flow, no breakout */
.viz-outer {
  padding: 0 !important;
}

/* Toolbar — normal flow in report column, never clipped */
.viz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
}
.viz-toolbar-left,
.viz-toolbar-center,
.viz-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.viz-node-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.viz-tool-btn {
  font-family: var(--mono);
  font-size: 16px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.viz-tool-btn:hover {
  background: var(--bg-hover, var(--bg-section));
  border-color: var(--accent);
  color: var(--accent);
}
.viz-zoom-level {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: center;
}
.viz-filter-select {
  font-family: var(--sans);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}

/* Stage navigation — arrows + counter next to filter */
.viz-stage-nav {
  display: none;
  align-items: center;
  gap: 4px;
}
.viz-stage-nav.active {
  display: flex;
}
.viz-stage-nav-btn {
  font-size: 12px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  padding: 0;
}
.viz-stage-nav-btn:hover {
  background: var(--bg-hover, var(--bg-section));
  border-color: var(--accent);
  color: var(--accent);
}
.viz-stage-counter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 28px;
  text-align: center;
}

/* Canvas row — breaks out to full viewport */
.viz-canvas-row {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  height: clamp(400px, 65vh, 700px);
  display: flex;
  background: var(--bg);
  overflow: hidden;
}

/* Canvas container — fills available width (shrinks when detail panel open) */
.viz-canvas-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.viz-canvas-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.viz-canvas-wrap canvas:active {
  cursor: grabbing;
}

/* Detail panel — fixed to viewport right edge, outside all overflow containers */
.viz-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  overflow-y: auto;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px rgba(0,0,0,0.15);
  padding: 16px;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.viz-detail-panel.open {
  transform: translateX(0);
}
.viz-detail-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}
.viz-detail-close:hover {
  color: var(--text);
}
.viz-detail-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  padding-right: 24px;
}
.viz-detail-class {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  word-break: break-all;
}
.viz-detail-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 12px;
}
/* Stage dropdown nav in detail sidebar */
.viz-detail-stage-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.viz-detail-stage-select {
  flex: 1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  outline: none;
}
.viz-detail-stage-select option {
  background: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  font-size: 11px;
}
.viz-detail-stage-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.viz-detail-stage-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.viz-detail-section {
  margin-bottom: 12px;
}
.viz-detail-section-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.viz-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}
.viz-detail-key {
  font-family: var(--mono);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.viz-detail-value {
  text-align: right;
  max-width: 60%;
  word-break: break-all;
  color: var(--text);
}

/* Legend — normal flow in report column, never clipped */
.viz-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.viz-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.viz-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Detail panel: pack info ─────────────────────────────────── */
.viz-detail-pack {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.viz-detail-pack-name {
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.viz-detail-pack-link {
  display: inline-flex;
  align-items: center;
  color: #999;
  transition: color var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}
.viz-detail-pack-link:hover { color: #1A1A1A; }
[data-theme="dark"] .viz-detail-pack-link { color: #4ADE80; }
[data-theme="dark"] .viz-detail-pack-link:hover { color: #86EFAC; }
.viz-detail-pack-link svg { width: 15px; height: 15px; }

/* ── Detail panel: divider ──────────────────────────────────── */
.viz-detail-divider {
  height: 1px;
  background: var(--border-light);
  margin: 10px 0;
}

/* ── Detail panel: connections ──────────────────────────────── */
.viz-detail-conn {
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: baseline;
}
.viz-detail-conn:last-child { border-bottom: none; }
.viz-conn-label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10px;
}
.viz-detail-conn-in .viz-conn-label { color: #3b82f6; }
[data-theme="dark"] .viz-detail-conn-in .viz-conn-label { color: #93c5fd; }
.viz-detail-conn-out .viz-conn-label { color: #16a34a; }
[data-theme="dark"] .viz-detail-conn-out .viz-conn-label { color: #86efac; }
.viz-conn-dir {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.viz-conn-peer {
  font-size: 11px;
  color: var(--text);
}
.viz-conn-id {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}

/* ── Detail panel: editable settings ────────────────────────── */
.viz-detail-setting {
  margin-bottom: 8px;
}
.viz-detail-setting-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.viz-detail-setting-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
  box-sizing: border-box;
}
.viz-detail-setting-input:focus {
  outline: none;
  border-color: var(--text);
}
.viz-detail-setting-input:hover {
  border-color: var(--text-muted);
}
.viz-detail-setting-input.edited {
  border-color: var(--accent);
  background: var(--accent-light);
}
.viz-setting-textarea {
  min-height: 60px;
  max-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.viz-setting-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.viz-setting-select option {
  background: var(--bg);
  color: var(--text);
}
.viz-detail-setting-input[type="number"] {
  -moz-appearance: textfield;
}
.viz-detail-setting-input[type="number"]::-webkit-inner-spin-button,
.viz-detail-setting-input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* ── Detail panel: model files ──────────────────────────────── */
.viz-detail-model {
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.viz-detail-model:last-child { border-bottom: none; }

/* ── Link confirmation popup ────────────────────────────────── */
.viz-link-confirm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 4px 24px rgba(0,0,0,0.15));
  padding: 16px 20px;
  text-align: center;
  min-width: 200px;
}
.viz-link-confirm-text {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text);
}
.viz-link-confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.viz-link-confirm-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}
.viz-link-confirm-btn:hover {
  background: var(--bg-hover);
}
.viz-link-confirm-btn.yes {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.viz-link-confirm-btn.yes:hover {
  opacity: 0.85;
}

/* ── Model Checklist: per-item copy button ──────────────────── */
.mc-copy-path {
  font-size: 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 5px;
  flex-shrink: 0;
  transition: all var(--transition);
  line-height: 1;
}
.mc-copy-path:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light, rgba(34,197,94,0.06));
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .viz-canvas-row {
    height: clamp(280px, 50vh, 400px);
    flex-direction: column;
  }
  .viz-detail-panel {
    width: 280px;
  }
  .viz-toolbar {
    padding: 6px 12px;
    gap: 6px;
  }
  .viz-toolbar-center {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .viz-legend {
    gap: 8px;
    padding: 6px 12px;
  }
  .viz-legend-item {
    font-size: 10px;
  }
}