/* Extracted from lighthouse-app.html (UI redesign N1) — load order matters */
    /* Pages List */
    .pages-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .page-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    
    .page-icon {
      font-size: 18px;
    }
    
    .page-info {
      flex: 1;
      overflow: hidden;
    }
    
    .page-title {
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .page-url {
      font-size: 11px;
      color: var(--text-muted);
      font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .page-meta {
      display: flex;
      gap: 8px;
    }
    
    .page-badge {
      padding: 3px 8px;
      background: var(--bg-tertiary);
      border-radius: var(--radius-xs);
    }
    
    /* Analysis Mode Selector */
    .mode-option {
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .mode-option:hover {
      background: var(--bg-tertiary);
      border-color: var(--accent-purple);
    }
    
    .mode-option input[type="radio"] {
      accent-color: var(--accent-purple);
      width: 16px;
      height: 16px;
    }
    
    .mode-option:has(input:checked) {
      border-color: var(--accent-purple);
      background: rgba(139, 92, 246, 0.1);
      font-size: 10px;
      color: var(--text-muted);
    }
    
    .page-badge.has-schema {
      background: rgba(34, 197, 94, 0.15);
      color: var(--accent-green);
    }

    /* Methodology Selector Cards */
    .methodology-card {
      display: flex;
      flex-direction: column;
      padding: 14px;
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .methodology-card:hover {
      border-color: var(--accent-purple);
      background: var(--bg-tertiary);
    }
    .methodology-card.selected {
      border-color: var(--accent-purple);
      background: rgba(139, 92, 246, 0.1);
      box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3);
    }
    .methodology-card-icon {
      font-size: 22px;
      margin-bottom: 8px;
    }
    .methodology-card-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .methodology-card-desc {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
      margin-bottom: 8px;
      flex: 1;
    }
    .methodology-card-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .methodology-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
    }
    .methodology-badge-green {
      background: rgba(34, 197, 94, 0.15);
      color: var(--accent-green);
    }
    .methodology-badge-blue {
      background: rgba(59, 130, 246, 0.15);
      color: var(--accent-blue);
    }
    .methodology-badge-gold {
      background: rgba(234, 179, 8, 0.15);
      color: var(--accent-gold);
    }
    .methodology-badge-purple {
      background: rgba(139, 92, 246, 0.15);
      color: var(--accent-purple);
    }

    /* Delta badge for combined mode */
    .delta-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
    }
    .delta-badge.agree {
      background: rgba(34, 197, 94, 0.15);
      color: var(--accent-green);
    }
    .delta-badge.disagree {
      background: rgba(239, 68, 68, 0.15);
      color: var(--accent-red);
    }
    .delta-badge.moderate {
      background: rgba(234, 179, 8, 0.15);
      color: var(--accent-gold);
    }

    /* Channel comparison section */
    .channel-comparison {
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      margin-top: 12px;
    }
    .channel-comparison-header {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent-purple);
      margin-bottom: 10px;
    }
    .channel-comparison-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: start;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .channel-comparison-row:last-child {
      border-bottom: none;
    }
    .channel-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .channel-snippet {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    .channel-delta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      min-width: 80px;
    }
    .similarity-score {
      font-size: 18px;
      font-weight: 700;
    }
    .similarity-score.high { color: var(--accent-green); }
    .similarity-score.moderate { color: var(--accent-gold); }
    .similarity-score.low { color: var(--accent-red); }

    /* Section Headers */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .section-subtitle {
      font-size: 13px;
      color: var(--text-muted);
    }
    
    /* Empty State */
    .empty-state {
      text-align: center;
      padding: 48px 32px;
      color: var(--text-muted);
      background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(232, 168, 48, 0.03) 0%, transparent 70%);
      border-radius: var(--radius-xl);
      border: 1px dashed rgba(139, 148, 158, 0.15);
    }
    [data-theme="light"] .empty-state {
      background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(139, 90, 16, 0.03) 0%, transparent 70%);
      border-color: rgba(0, 0, 0, 0.08);
    }

    .empty-state-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.4;
      display: block;
      filter: grayscale(0.5);
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-bottom: 8px;
      letter-spacing: 0.2px;
    }

    .empty-state-desc {
      font-size: 13px;
      color: var(--text-muted);
      max-width: 360px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .empty-state-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 20px;
      padding: 8px 18px;
      background: rgba(232, 168, 48, 0.08);
      border: 1px solid rgba(232, 168, 48, 0.2);
      border-radius: var(--radius-md);
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
      font-family: inherit;
    }
    .empty-state-cta:hover {
      background: rgba(232, 168, 48, 0.12);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(232, 168, 48, 0.15);
    }
    [data-theme="light"] .empty-state-cta {
      background: rgba(139, 90, 16, 0.06);
      border-color: rgba(139, 90, 16, 0.2);
      color: #8B5A10;
    }
    [data-theme="light"] .empty-state-cta:hover {
      background: rgba(139, 90, 16, 0.1);
    }
    
    /* Utility */
    .hidden {
      display: none !important;
    }
    
    .text-green { color: var(--accent-green); }
    .text-yellow { color: var(--accent-yellow); }
    .text-orange { color: var(--accent-orange); }
    .text-red { color: var(--accent-red); }
    .text-cyan { color: var(--accent); }
    .text-purple { color: var(--accent-purple); }
    
    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: var(--bg-secondary);
    }
    
    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: var(--radius-xs);
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }
    
    /* ═══════════════════════════════════════ */