/* OriginPanel.css */
:root {
  /* Colors */
  --op-bg-color: #1A0A0A;
  --op-card-bg: #1A0A0A;
  --op-text-primary: #e0e0e0;
  --op-text-secondary: #aaaaaa;
  --op-border-color: #3a1a1a;
  --op-accent-color: #FF1E1E; /* Primary Red */
  --op-accent-hover: #FF4D4D; /* Glow Red */

  /* Confidence Colors */
  --op-conf-high: #00c853;
  --op-conf-medium: #ffd600;
  --op-conf-low: #FF4D4D;

  /* Typography */
  --op-font-heading: 'Orbitron', sans-serif;
  --op-font-family: 'Exo 2', sans-serif;
  --op-font-mono: 'Space Mono', monospace;
  
  /* Spacing Scale (consistent 8px base) */
  --op-space-xs: 4px;
  --op-space-sm: 8px;
  --op-space-md: 16px;
  --op-space-lg: 24px;
  --op-space-xl: 32px;
  --op-space-2xl: 48px;
  
  /* Line Heights */
  --op-line-height-tight: 1.3;
  --op-line-height-normal: 1.5;
  --op-line-height-relaxed: 1.6;
  --op-line-height-mono: 1.4;
}

.origin-panel {
  font-family: var(--op-font-family);
  background: transparent;
  color: var(--op-text-primary);
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 100%;
  margin: 0;
  box-shadow: none;
  line-height: var(--op-line-height-normal);
}

.op-header {
  margin-bottom: var(--op-space-lg);
  text-align: center;
}

.op-title {
  font-family: var(--op-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--op-space-sm);
  color: var(--op-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: var(--op-line-height-tight);
}

.op-target-address {
  font-family: var(--op-font-mono);
  font-size: 1.4rem;
  color: #fff;
  word-break: break-all;
  line-height: var(--op-line-height-mono);
}

.op-global-confidence {
  display: inline-block;
  margin-top: var(--op-space-sm);
  padding: var(--op-space-xs) var(--op-space-sm);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  background: #333;
  line-height: var(--op-line-height-normal);
}

.op-conf-high { color: var(--op-conf-high); border: 1px solid var(--op-conf-high); }
.op-conf-medium { color: var(--op-conf-medium); border: 1px solid var(--op-conf-medium); }
.op-conf-low { color: var(--op-conf-low); border: 1px solid var(--op-conf-low); }

/* Input Section (Standalone Mode) */
.op-input-section {
  display: flex;
  gap: var(--op-space-sm);
  margin-bottom: var(--op-space-lg);
}

.op-input {
  flex: 1;
  padding: var(--op-space-sm) var(--op-space-md);
  background: #000;
  border: 1px solid var(--op-border-color);
  color: #fff;
  border-radius: 4px;
  font-family: var(--op-font-mono);
  line-height: var(--op-line-height-mono);
}

.op-button {
  padding: var(--op-space-sm) var(--op-space-md);
  background: var(--op-accent-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--op-font-family);
  font-weight: 600;
  transition: background 0.2s;
  min-height: 44px;
}

.op-button:hover {
  background: var(--op-accent-hover);
}

.op-button:disabled {
  background: #555;
  cursor: not-allowed;
}

/* Candidates List */
.op-candidates-list {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
}

.op-candidate-card {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border-color);
  border-radius: 8px;
  overflow: hidden;
}

.op-candidate-header {
  display: flex;
  align-items: center;
  padding: var(--op-space-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.op-candidate-header:hover {
  background: #333;
}

.op-candidate-header:focus-visible {
  outline: 2px solid var(--op-accent-color);
  outline-offset: -2px;
  background: #333;
}

.op-candidate-header:focus:not(:focus-visible) {
  outline: none;
}

.op-rank-indicator {
  width: 4px;
  height: 40px;
  margin-right: var(--op-space-md);
  border-radius: 2px;
}

.op-candidate-info {
  flex: 1;
  min-width: 0; /* Flexbox text overflow fix */
}

.op-candidate-address-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  margin-bottom: var(--op-space-xs);
  flex-wrap: wrap;
}

.op-address {
  font-family: var(--op-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  cursor: text;
  line-height: var(--op-line-height-mono);
}

/* Mobile address truncation - show prefix...suffix */
@media (max-width: 600px) {
  .op-address {
    font-size: 0.85rem;
    max-width: 180px;
  }
  
  /* Use data attribute for full address on mobile */
  .op-address[title] {
    position: relative;
  }
}

/* Copy Button */
.op-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* Touch target minimum */
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--op-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
  touch-action: manipulation; /* Prevent double-tap zoom */
}

.op-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--op-border-color);
  color: var(--op-text-primary);
}

.op-copy-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.15);
}

/* Enhanced touch feedback */
@media (hover: none) and (pointer: coarse) {
  .op-copy-btn:active {
    transform: scale(0.85);
    background: rgba(0, 200, 83, 0.2);
    border-color: var(--op-conf-high);
  }
}

.op-copy-btn svg {
  width: 16px;
  height: 16px;
}

.op-copy-btn.copied {
  color: var(--op-conf-high);
  border-color: var(--op-conf-high);
  background: rgba(0, 200, 83, 0.1);
}

.op-copy-btn.copied svg {
  animation: op-copy-success 0.3s ease-out;
}

@keyframes op-copy-success {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.op-role-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #444;
  color: #bbb;
  text-transform: uppercase;
}

.op-role-infra {
  background: #5e35b1;
  color: #fff;
}

/* First Funder Badge */
.op-first-funder-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1a1a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
}

/* Appearance Rank */
.op-appearance-rank {
  font-size: 0.75rem;
  color: var(--op-text-secondary);
  background: #333;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.op-candidate-meta {
  display: flex;
  gap: var(--op-space-sm);
  font-size: 0.85rem;
  color: var(--op-text-secondary);
  flex-wrap: wrap;
  align-items: center;
  line-height: var(--op-line-height-relaxed);
}

.op-percentage-badge {
  font-weight: bold;
  color: #fff;
  background: #444;
  padding: var(--op-space-xs) var(--op-space-sm);
  border-radius: 10px;
}

.op-toggle-icon {
  margin-left: var(--op-space-md);
  transition: transform 0.3s;
}

.op-candidate-card.expanded .op-toggle-icon {
  transform: rotate(180deg);
}

/* Details Section */
.op-candidate-details {
  display: none;
  padding: 0 var(--op-space-md) var(--op-space-md) var(--op-space-md);
  border-top: 1px solid var(--op-border-color);
  background: #222;
  animation: op-slide-down 0.3s ease-out;
}

.op-candidate-card.expanded .op-candidate-details {
  display: block;
}

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

.op-reasons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--op-space-md);
  margin-top: var(--op-space-md);
}

.op-reason-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  margin: 0 0 var(--op-space-sm) 0;
  color: #888;
  line-height: var(--op-line-height-tight);
}

.op-reason-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.op-reason-list li {
  position: relative;
  padding-left: var(--op-space-md);
  margin-bottom: var(--op-space-xs);
  color: #ddd;
  line-height: var(--op-line-height-relaxed);
}

.op-reason-list.positive li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--op-conf-high);
}

.op-reason-list.negative li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--op-conf-low);
}

.op-interpretation {
  margin-top: var(--op-space-md);
  padding: var(--op-space-sm);
  background: #333;
  border-radius: 4px;
  font-style: italic;
  font-size: 0.9rem;
  color: #ccc;
  line-height: var(--op-line-height-relaxed);
}

/* State Messages */
.op-message {
  padding: var(--op-space-xl);
  text-align: center;
  color: #888;
  line-height: var(--op-line-height-normal);
}

.op-error {
  color: var(--op-conf-low);
}

.op-loading {
  color: var(--op-conf-medium);
  font-style: italic;
}

/* Feedback Section */
.op-feedback-section {
  margin-top: var(--op-space-lg);
  padding: var(--op-space-md);
  background: #1a1a1a;
  border: 1px solid var(--op-border-color);
  border-radius: 8px;
}

.op-feedback-title {
  font-family: var(--op-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--op-text-secondary);
  margin-bottom: var(--op-space-md);
  line-height: var(--op-line-height-tight);
}

.op-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-sm);
}

.op-feedback-question {
  font-size: 0.9rem;
  color: var(--op-text-primary);
  margin-bottom: var(--op-space-xs);
  line-height: var(--op-line-height-normal);
}

.op-feedback-options {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-sm);
}

.op-feedback-options label {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  font-size: 0.85rem;
  color: var(--op-text-secondary);
  cursor: pointer;
  line-height: var(--op-line-height-normal);
}

.op-feedback-options input[type="radio"] {
  accent-color: var(--op-accent-color);
}

.op-feedback-btn {
  margin-top: var(--op-space-md);
  align-self: flex-start;
}

.op-feedback-success {
  padding: var(--op-space-md);
  background: rgba(0, 200, 83, 0.1);
  border: 1px solid var(--op-conf-high);
  border-radius: 4px;
  color: var(--op-conf-high);
  font-size: 0.9rem;
  line-height: var(--op-line-height-normal);
}

.op-error-text {
  color: var(--op-conf-low);
  font-size: 0.8rem;
  margin-top: var(--op-space-sm);
}

/* ===== Deep Scan Toggle ===== */
.op-scan-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-md);
  margin-top: var(--op-space-md);
  padding-top: var(--op-space-md);
  border-top: 1px solid var(--op-border-color);
}

.op-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--op-text-secondary);
  min-height: 44px;
}

.op-toggle-label input {
  display: none;
}

.op-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #444;
  border-radius: 12px;
  transition: background 0.3s;
}

.op-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #888;
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
}

.op-toggle-label input:checked + .op-toggle-switch {
  background: var(--op-accent-color);
}

.op-toggle-label input:checked + .op-toggle-switch::after {
  transform: translateX(20px);
  background: #fff;
}

.op-toggle-text {
  user-select: none;
}

/* Info Button */
.op-info-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--op-text-secondary);
  background: transparent;
  color: var(--op-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-info-btn:hover {
  border-color: var(--op-accent-color);
  color: var(--op-accent-color);
  background: rgba(255, 30, 30, 0.1);
}

/* ===== Info Modal ===== */
.op-info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: op-fade-in 0.2s ease-out;
}

@keyframes op-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.op-info-modal {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border-color);
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: op-modal-slide 0.3s ease-out;
}

@keyframes op-modal-slide {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.op-info-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--op-space-md) var(--op-space-lg);
  border-bottom: 1px solid var(--op-border-color);
}

.op-info-modal-header h3 {
  margin: 0;
  font-family: var(--op-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--op-text-primary);
  line-height: var(--op-line-height-tight);
}

.op-info-modal-close {
  background: none;
  border: none;
  color: var(--op-text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.op-info-modal-close:hover {
  color: var(--op-accent-color);
}

.op-info-modal-content {
  padding: var(--op-space-lg);
  font-size: 0.9rem;
  line-height: var(--op-line-height-relaxed);
  color: var(--op-text-secondary);
}

.op-info-modal-content p {
  margin: 0 0 var(--op-space-md) 0;
}

.op-info-modal-content ul {
  margin: var(--op-space-md) 0;
  padding-left: var(--op-space-lg);
}

.op-info-modal-content li {
  margin-bottom: var(--op-space-sm);
}

.op-info-modal-content strong {
  color: var(--op-text-primary);
}

.op-info-note {
  margin-top: var(--op-space-md) !important;
  padding: var(--op-space-md);
  background: rgba(255, 214, 0, 0.1);
  border-left: 3px solid var(--op-conf-medium);
  border-radius: 0 4px 4px 0;
}

/* ===== Progress Bar ===== */
.op-progress-container {
  padding: var(--op-space-2xl) var(--op-space-lg);
  text-align: center;
}

.op-progress-status {
  font-family: var(--op-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--op-text-primary);
  margin-bottom: var(--op-space-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: var(--op-line-height-tight);
}

.op-progress-bar {
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--op-space-md);
}

.op-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--op-accent-color), #ff4444);
  border-radius: 4px;
  transition: width 0.3s ease-out;
  position: relative;
}

.op-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: op-shimmer 1.5s infinite;
}

@keyframes op-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.op-progress-text {
  font-size: 0.85rem;
  color: var(--op-text-secondary);
}

/* ===== Animated Scanner Loading ===== */
.op-scanner-container {
  padding: var(--op-space-2xl) var(--op-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-lg);
}

.op-scanner-grid {
  position: relative;
  width: 120px;
  height: 120px;
}

.op-scanner-ring {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: op-rotate 3s linear infinite;
}

.op-ring-1 {
  inset: 0;
  border-top-color: var(--op-accent-color);
  border-right-color: var(--op-accent-color);
  animation-duration: 2s;
}

.op-ring-2 {
  inset: 12px;
  border-top-color: rgba(255, 30, 30, 0.5);
  border-left-color: rgba(255, 30, 30, 0.5);
  animation-duration: 2.5s;
  animation-direction: reverse;
}

.op-ring-3 {
  inset: 24px;
  border-bottom-color: rgba(255, 30, 30, 0.3);
  border-right-color: rgba(255, 30, 30, 0.3);
  animation-duration: 3s;
}

@keyframes op-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.op-scanner-core {
  position: absolute;
  inset: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 30, 30, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: op-pulse-core 2s ease-in-out infinite;
}

.op-scanner-core svg {
  width: 32px;
  height: 32px;
  color: var(--op-accent-color);
  filter: drop-shadow(0 0 8px rgba(255, 30, 30, 0.6));
}

@keyframes op-pulse-core {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.1);
    opacity: 1;
  }
}

.op-scanner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-xs);
}

.op-scanner-title {
  font-family: var(--op-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--op-text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: var(--op-line-height-tight);
}

.op-scanner-subtitle {
  font-size: 0.85rem;
  color: var(--op-text-secondary);
  line-height: var(--op-line-height-normal);
}

.op-scanner-dots {
  display: flex;
  gap: var(--op-space-sm);
}

.op-scanner-dots span {
  width: 8px;
  height: 8px;
  background: var(--op-accent-color);
  border-radius: 50%;
  animation: op-dot-bounce 1.4s ease-in-out infinite;
}

.op-scanner-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.op-scanner-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes op-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== Deep Scan Confirmation Modal ===== */
.op-deep-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: op-fade-in 0.2s ease-out;
}

.op-deep-confirm-modal {
  background: linear-gradient(145deg, #2a1a1a 0%, #1A0A0A 100%);
  border: 1px solid var(--op-border-color);
  border-radius: 16px;
  max-width: 480px;
  width: 90%;
  overflow: hidden;
  animation: op-modal-slide 0.3s ease-out;
  box-shadow: 
    0 0 0 1px rgba(255, 30, 30, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.5);
}

.op-deep-confirm-header {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  padding: var(--op-space-lg);
  border-bottom: 1px solid var(--op-border-color);
  background: rgba(255, 30, 30, 0.05);
}

.op-deep-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--op-accent-color), #ff4444);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(195, 0, 0, 0.3);
  flex-shrink: 0;
}

.op-deep-confirm-icon svg {
  width: 28px;
  height: 28px;
  color: white;
}

.op-deep-confirm-header h3 {
  margin: 0;
  font-family: var(--op-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--op-text-primary);
}

.op-deep-confirm-content {
  padding: var(--op-space-lg);
  font-size: 0.9rem;
  line-height: var(--op-line-height-relaxed);
  color: var(--op-text-secondary);
}

.op-deep-confirm-content p {
  margin: 0 0 var(--op-space-md) 0;
}

.op-deep-confirm-content ul {
  margin: 0 0 var(--op-space-lg) 0;
  padding-left: 0;
  list-style: none;
}

.op-deep-confirm-content li {
  padding: var(--op-space-sm) 0 var(--op-space-sm) var(--op-space-lg);
  position: relative;
  border-left: 2px solid rgba(255, 30, 30, 0.3);
  margin-left: var(--op-space-sm);
}

.op-deep-confirm-content li::before {
  content: '→';
  position: absolute;
  left: 6px;
  color: var(--op-accent-color);
}

.op-deep-confirm-content strong {
  color: var(--op-text-primary);
}

.op-deep-confirm-warning {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  padding: var(--op-space-md);
  background: rgba(255, 214, 0, 0.08);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--op-conf-medium);
  line-height: var(--op-line-height-normal);
}

.op-warning-icon {
  font-size: 1.2rem;
}

.op-deep-confirm-footer {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
  padding: var(--op-space-lg);
  border-top: 1px solid var(--op-border-color);
  background: rgba(0, 0, 0, 0.2);
}

/* Custom Checkbox */
.op-dont-show-label {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--op-text-secondary);
  user-select: none;
  min-height: 44px;
}

.op-dont-show-checkbox {
  display: none;
}

.op-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.op-dont-show-checkbox:checked + .op-checkbox-custom {
  background: var(--op-accent-color);
  border-color: var(--op-accent-color);
}

.op-checkbox-custom::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s;
}

.op-dont-show-checkbox:checked + .op-checkbox-custom::after {
  transform: rotate(45deg) scale(1);
}

.op-dont-show-label:hover .op-checkbox-custom {
  border-color: var(--op-accent-color);
}

.op-deep-confirm-buttons {
  display: flex;
  gap: var(--op-space-md);
  justify-content: flex-end;
}

.op-btn-cancel,
.op-btn-confirm {
  padding: var(--op-space-md) var(--op-space-lg);
  border-radius: 8px;
  font-family: var(--op-font-family);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.op-btn-cancel {
  background: transparent;
  border: 1px solid var(--op-border-color);
  color: var(--op-text-secondary);
}

.op-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--op-text-secondary);
  color: var(--op-text-primary);
}

.op-btn-confirm {
  background: linear-gradient(135deg, var(--op-accent-color), #FF4D4D);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 30, 30, 0.3);
}

.op-btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 77, 77, 0.4);
}

.op-btn-confirm:active {
  transform: translateY(0);
}

/* ===== Tooltip System ===== */
.op-tooltip {
  position: absolute;
  z-index: 10000;
  max-width: 300px;
  padding: var(--op-space-sm) var(--op-space-md);
  background: linear-gradient(145deg, #333 0%, #222 100%);
  border: 1px solid #555;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
  line-height: var(--op-line-height-normal);
  color: var(--op-text-primary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: none;
}

.op-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}

.op-tooltip-content {
  position: relative;
  z-index: 1;
}

.op-tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #333;
  border: 1px solid #555;
  transform: rotate(45deg);
}

.op-tooltip-top .op-tooltip-arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  border-top: none;
  border-left: none;
}

.op-tooltip-bottom .op-tooltip-arrow {
  top: -6px;
  left: 50%;
  margin-left: -5px;
  border-bottom: none;
  border-right: none;
}

.op-tooltip-left .op-tooltip-arrow {
  right: -6px;
  top: 50%;
  margin-top: -5px;
  border-left: none;
  border-bottom: none;
}

.op-tooltip-right .op-tooltip-arrow {
  left: -6px;
  top: 50%;
  margin-top: -5px;
  border-right: none;
  border-top: none;
}

.op-has-tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--op-text-secondary);
}

/* Remove underline from badges with tooltips */
.op-first-funder-badge.op-has-tooltip,
.op-role-badge.op-has-tooltip,
.op-percentage-badge.op-has-tooltip,
.op-appearance-rank.op-has-tooltip,
.op-global-confidence.op-has-tooltip {
  border-bottom: none;
}

/* ===== Confidence Dots ===== */
.op-conf-dots {
  margin-left: 6px;
  font-size: 0.7rem;
  letter-spacing: 2px;
}

.op-conf-high .op-conf-dots { color: var(--op-conf-high); }
.op-conf-medium .op-conf-dots { color: var(--op-conf-medium); }
.op-conf-low .op-conf-dots { color: var(--op-conf-low); }

/* ===== Late Warning Badge ===== */
.op-late-warning {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  font-weight: 600;
}

/* ===== Reasons List None State ===== */
.op-reason-list li.op-none {
  color: #666;
  font-style: italic;
}

.op-reason-list li.op-none::before {
  content: "—";
  color: #666;
}

/* ===== Summary Header with Ask AI ===== */
.op-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--op-space-md);
  padding-bottom: var(--op-space-md);
  border-bottom: 1px solid var(--op-border-color);
  gap: var(--op-space-md);
}

.op-summary-header .op-global-confidence {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--op-space-xs);
}

/* ===== Ask AI Button ===== */
.op-ask-ai-btn {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-sm) var(--op-space-md);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 20px;
  color: white;
  font-family: var(--op-font-family);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  min-height: 44px;
  flex-shrink: 0;
}

.op-ask-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.op-ask-ai-btn svg {
  width: 18px;
  height: 18px;
}

/* ===== Insight Callout (Contradictions) ===== */
.op-insight-callout {
  display: flex;
  gap: var(--op-space-md);
  padding: var(--op-space-md);
  margin-bottom: var(--op-space-md);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  animation: op-slide-down 0.3s ease-out;
}

.op-insight-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.op-insight-content {
  flex: 1;
}

.op-insight-content strong {
  display: block;
  margin-bottom: var(--op-space-xs);
  color: #a5b4fc;
  font-size: 0.9rem;
  line-height: var(--op-line-height-tight);
}

.op-insight-content p {
  margin: 0;
  font-size: 0.85rem;
  line-height: var(--op-line-height-relaxed);
  color: var(--op-text-secondary);
}

/* ===== AI Explainer Modal ===== */
.op-explainer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: op-fade-in 0.2s ease-out;
}

.op-explainer-modal {
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 1px solid var(--op-border-color);
  border-radius: 16px;
  max-width: 560px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: op-modal-slide 0.3s ease-out;
  box-shadow: 
    0 0 0 1px rgba(99, 102, 241, 0.2),
    0 24px 64px rgba(0, 0, 0, 0.5);
}

.op-explainer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--op-space-lg);
  border-bottom: 1px solid var(--op-border-color);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
}

.op-explainer-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--op-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--op-text-primary);
}

.op-ai-sparkle {
  width: 20px;
  height: 20px;
  color: #a5b4fc;
  animation: op-sparkle-pulse 2s ease-in-out infinite;
}

@keyframes op-sparkle-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.op-explainer-close {
  background: none;
  border: none;
  color: var(--op-text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s;
}

.op-explainer-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--op-text-primary);
}

.op-explainer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--op-space-lg);
  overflow: hidden;
}

/* ===== Quick Question Buttons ===== */
.op-quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-sm);
  margin-bottom: var(--op-space-md);
}

.op-quick-q-btn {
  padding: var(--op-space-sm) var(--op-space-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--op-border-color);
  border-radius: 16px;
  color: var(--op-text-secondary);
  font-family: var(--op-font-family);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 36px;
}

.op-quick-q-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--op-text-primary);
}

/* ===== Chat Messages ===== */
.op-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
  padding: var(--op-space-xs);
  min-height: 150px;
  max-height: 300px;
}

.op-chat-msg {
  padding: var(--op-space-md);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: var(--op-line-height-relaxed);
  animation: op-msg-appear 0.3s ease-out;
}

@keyframes op-msg-appear {
  from { 
    opacity: 0; 
    transform: translateY(8px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

.op-chat-user {
  background: linear-gradient(135deg, var(--op-accent-color), #e50000);
  color: white;
  align-self: flex-end;
  max-width: 85%;
  border-bottom-right-radius: 4px;
}

.op-chat-assistant {
  background: #333;
  color: var(--op-text-primary);
  align-self: flex-start;
  max-width: 90%;
  border-bottom-left-radius: 4px;
}

.op-chat-error {
  border: 1px solid var(--op-conf-low);
  background: rgba(213, 0, 0, 0.1);
}

/* ===== AI Badge ===== */
.op-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-xs) var(--op-space-sm);
  margin-bottom: var(--op-space-sm);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.op-ai-sparkle-sm {
  width: 12px;
  height: 12px;
}

.op-ai-content {
  white-space: pre-wrap;
}

/* ===== Typing Indicator ===== */
.op-typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.op-typing-indicator span {
  width: 8px;
  height: 8px;
  background: #666;
  border-radius: 50%;
  animation: op-typing 1.4s ease-in-out infinite;
}

.op-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.op-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes op-typing {
  0%, 60%, 100% { 
    transform: translateY(0);
    background: #555;
  }
  30% { 
    transform: translateY(-6px);
    background: #888;
  }
}

/* ===== Chat Input Form ===== */
.op-chat-form {
  display: flex;
  gap: var(--op-space-sm);
  margin-top: var(--op-space-md);
  padding-top: var(--op-space-md);
  border-top: 1px solid var(--op-border-color);
}

.op-chat-input {
  flex: 1;
  padding: var(--op-space-md);
  background: #1a1a1a;
  border: 1px solid var(--op-border-color);
  border-radius: 24px;
  color: var(--op-text-primary);
  font-family: var(--op-font-family);
  font-size: 0.9rem;
  transition: border-color 0.2s;
  line-height: var(--op-line-height-normal);
}

.op-chat-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
}

.op-chat-input::placeholder {
  color: #666;
}

.op-chat-submit {
  width: 44px;
  height: 44px;
  padding: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.op-chat-submit:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.op-chat-submit:active {
  transform: scale(0.95);
}

.op-chat-submit svg {
  width: 20px;
  height: 20px;
}

/* ===== AI Disclaimer ===== */
.op-ai-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-sm);
  padding: var(--op-space-md) var(--op-space-lg);
  margin-top: auto;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--op-border-color);
  border-radius: 0 0 16px 16px;
  font-size: 0.75rem;
  line-height: var(--op-line-height-relaxed);
  color: #888;
}

.op-ai-disclaimer svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #666;
}

/* ===== Signal Strength Breakdown (Phase 2) ===== */
.op-signal-breakdown {
  margin-top: var(--op-space-md);
  padding-top: var(--op-space-md);
  border-top: 1px solid var(--op-border-color);
}

.op-signal-breakdown h4 {
  margin: 0 0 var(--op-space-md) 0;
  font-family: var(--op-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--op-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: var(--op-line-height-tight);
}

.op-signal-category {
  margin-bottom: var(--op-space-md);
}

.op-cat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--op-space-sm);
  line-height: var(--op-line-height-tight);
}

.op-signal-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  padding: var(--op-space-sm) 0;
}

.op-signal-name {
  flex: 0 0 140px;
  font-size: 0.85rem;
  color: var(--op-text-secondary);
}

.op-strength-bar {
  flex: 1;
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
}

.op-strength-bar .op-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

.op-signal-row.positive .op-fill {
  background: linear-gradient(90deg, #00c853, #69f0ae);
}

.op-signal-row.negative .op-fill {
  background: linear-gradient(90deg, #ff5252, #ff8a80);
}

.op-strength-label {
  flex: 0 0 100px;
  font-size: 0.75rem;
  color: var(--op-text-secondary);
  text-align: right;
}

.op-signal-row.positive .op-strength-label {
  color: var(--op-conf-high);
}

.op-signal-row.negative .op-strength-label {
  color: var(--op-conf-low);
}

/* ===== V3.1: Preview Mode Styles ===== */
.op-preview-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
}

.op-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--op-space-md);
  border-bottom: 1px solid var(--op-border-color);
}

.op-preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--op-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 12px;
}

.op-preview-txs {
  font-size: 0.8rem;
  color: var(--op-text-secondary);
}

.op-preview-card {
  background: linear-gradient(145deg, #2a2a2a 0%, #222 100%);
  border: 1px solid var(--op-border-color);
  border-radius: 12px;
  padding: var(--op-space-lg);
}

.op-preview-title {
  font-family: var(--op-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--op-text-secondary);
  margin-bottom: var(--op-space-md);
  line-height: var(--op-line-height-tight);
}

.op-preview-origin {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
}

.op-preview-address-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
}

.op-preview-address {
  font-family: var(--op-font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  word-break: break-all;
  line-height: var(--op-line-height-mono);
}

.op-preview-meta {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  flex-wrap: wrap;
}

.op-preview-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-sm) var(--op-space-md);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.3);
}

.op-preview-confidence.op-conf-high {
  background: rgba(0, 200, 83, 0.15);
  border: 1px solid rgba(0, 200, 83, 0.4);
}

.op-preview-confidence.op-conf-medium {
  background: rgba(255, 214, 0, 0.15);
  border: 1px solid rgba(255, 214, 0, 0.4);
}

.op-preview-confidence.op-conf-low {
  background: rgba(213, 0, 0, 0.15);
  border: 1px solid rgba(213, 0, 0, 0.4);
}

.op-preview-interpretation {
  font-size: 0.95rem;
  color: var(--op-text-secondary);
  font-style: italic;
  line-height: var(--op-line-height-relaxed);
}

.op-preview-reasons {
  margin-top: var(--op-space-lg);
  padding-top: var(--op-space-lg);
  border-top: 1px solid var(--op-border-color);
}

.op-preview-reasons-title {
  font-family: var(--op-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--op-text-secondary);
  margin-bottom: var(--op-space-md);
  line-height: var(--op-line-height-tight);
}

.op-preview-reasons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-sm);
}

.op-preview-reasons-list li {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  font-size: 0.9rem;
  color: var(--op-text-primary);
  line-height: var(--op-line-height-normal);
}

.op-preview-reasons-list li::before {
  content: "✓";
  color: var(--op-conf-high);
  font-weight: bold;
}

.op-preview-reasons-list li.op-none {
  color: var(--op-text-secondary);
  font-style: italic;
}

.op-preview-reasons-list li.op-none::before {
  content: "—";
  color: var(--op-text-secondary);
}

/* ===== V3.1: Stability Badge Styles ===== */
.op-summary-left {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-sm);
}

.op-stability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-sm) var(--op-space-md);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.3);
  cursor: help;
}

.op-stability-badge svg {
  width: 16px;
  height: 16px;
}

.op-stability-high {
  color: var(--op-conf-high);
  border: 1px solid rgba(0, 200, 83, 0.3);
  background: rgba(0, 200, 83, 0.1);
}

.op-stability-moderate {
  color: var(--op-conf-medium);
  border: 1px solid rgba(255, 214, 0, 0.3);
  background: rgba(255, 214, 0, 0.1);
}

.op-stability-low {
  color: var(--op-conf-low);
  border: 1px solid rgba(213, 0, 0, 0.3);
  background: rgba(213, 0, 0, 0.1);
}

.op-analysis-meta {
  font-size: 0.8rem;
  color: var(--op-text-secondary);
}

/* ===== AI Summary Section ===== */
.op-summary-section {
  margin-bottom: var(--op-space-lg);
}

/* Generate Summary Button */
.op-generate-summary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-sm);
  width: 100%;
  padding: var(--op-space-md) var(--op-space-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 2px dashed rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  color: #a5b4fc;
  font-family: var(--op-font-family);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 56px;
}

.op-generate-summary-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.op-generate-summary-btn:active {
  transform: translateY(0);
}

.op-generate-summary-btn .op-ai-sparkle {
  width: 22px;
  height: 22px;
}

/* Summary Loading State */
.op-summary-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--op-space-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
}

.op-summary-loading-content {
  display: flex;
  align-items: center;
  gap: var(--op-space-md);
  color: #a5b4fc;
  font-size: 0.95rem;
  font-weight: 500;
}

.op-summary-loading .op-ai-sparkle.spinning {
  animation: op-sparkle-spin 1.5s linear infinite;
}

@keyframes op-sparkle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Summary Card */
.op-summary-card {
  background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
}

.op-summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--op-space-md) var(--op-space-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  gap: var(--op-space-md);
  flex-wrap: wrap;
}

.op-summary-title {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  font-family: var(--op-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--op-text-primary);
  line-height: var(--op-line-height-tight);
}

.op-summary-title .op-ai-sparkle {
  width: 20px;
  height: 20px;
  color: #a5b4fc;
}

/* AI Interpretation Text */
.op-summary-interpretation {
  padding: var(--op-space-lg);
  font-size: 0.95rem;
  line-height: var(--op-line-height-relaxed);
  color: var(--op-text-primary);
  border-bottom: 1px solid var(--op-border-color);
  white-space: pre-wrap;
}

/* Wallet Profile Grid */
.op-summary-profile {
  padding: var(--op-space-lg);
  border-bottom: 1px solid var(--op-border-color);
}

.op-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--op-space-md);
}

.op-profile-item {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-xs);
}

.op-profile-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--op-text-secondary);
}

.op-profile-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--op-text-primary);
}

/* Data Quality Badges */
.op-profile-value.op-quality-rich {
  color: var(--op-conf-high);
}

.op-profile-value.op-quality-adequate {
  color: var(--op-conf-medium);
}

.op-profile-value.op-quality-limited,
.op-profile-value.op-quality-insufficient {
  color: var(--op-conf-low);
}

/* Summary Alerts */
.op-summary-alerts {
  padding: var(--op-space-md) var(--op-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--op-border-color);
}

.op-summary-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-md);
  padding: var(--op-space-md);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: var(--op-line-height-normal);
}

.op-alert-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.op-alert-content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-xs);
}

.op-alert-content strong {
  font-size: 0.85rem;
  color: inherit;
}

.op-alert-content span {
  font-size: 0.8rem;
  opacity: 0.85;
}

.op-summary-alert.op-alert-danger {
  background: rgba(213, 0, 0, 0.15);
  border: 1px solid rgba(213, 0, 0, 0.3);
  color: #ff8a80;
}

.op-summary-alert.op-alert-warning {
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ffcc80;
}

.op-summary-alert.op-alert-info {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

/* Summary Footer */
.op-summary-footer {
  padding: var(--op-space-md) var(--op-space-lg);
  display: flex;
  justify-content: center;
}

.op-ask-more-btn {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-sm) var(--op-space-md);
  background: transparent;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 24px;
  color: #a5b4fc;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.op-ask-more-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
}

.op-ask-more-btn svg {
  width: 18px;
  height: 18px;
}

/* Summary Disclaimer */
.op-summary-disclaimer {
  padding: var(--op-space-md) var(--op-space-lg);
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.7rem;
  text-align: center;
  color: #666;
  font-style: italic;
  line-height: var(--op-line-height-normal);
}

/* Summary Error State */
.op-summary-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-md);
  padding: var(--op-space-lg);
  background: rgba(213, 0, 0, 0.1);
  border: 1px solid rgba(213, 0, 0, 0.3);
  border-radius: 12px;
}

.op-summary-error .op-error-icon {
  font-size: 1.2rem;
}

.op-summary-error .op-error-text {
  color: var(--op-conf-low);
  font-size: 0.9rem;
  margin: 0;
}

.op-retry-btn {
  padding: var(--op-space-sm) var(--op-space-md);
  background: transparent;
  border: 1px solid var(--op-conf-low);
  border-radius: 6px;
  color: var(--op-conf-low);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
}

.op-retry-btn:hover {
  background: rgba(213, 0, 0, 0.15);
}

/* ===== AI Summary Fallback (Offline Mode) ===== */
.op-summary-fallback {
  background: linear-gradient(145deg, rgba(100, 100, 120, 0.1) 0%, rgba(80, 80, 100, 0.05) 100%);
  border: 1px solid rgba(150, 150, 170, 0.25);
  border-radius: 12px;
  padding: var(--op-space-lg);
  margin-bottom: var(--op-space-md);
}

.op-summary-fallback-header {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  margin-bottom: var(--op-space-md);
  padding-bottom: var(--op-space-sm);
  border-bottom: 1px solid rgba(150, 150, 170, 0.15);
}

.op-fallback-icon {
  font-size: 1.2rem;
}

.op-fallback-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--op-text-primary);
  flex: 1;
}

.op-fallback-badge {
  padding: 2px 8px;
  background: rgba(150, 150, 170, 0.2);
  border-radius: 10px;
  font-size: 0.7rem;
  color: var(--op-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.op-fallback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--op-space-md);
  margin-bottom: var(--op-space-md);
}

.op-fallback-item {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-xs);
}

.op-fallback-label {
  font-size: 0.7rem;
  color: var(--op-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.op-fallback-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--op-text-primary);
}

.op-fallback-address {
  font-family: var(--op-font-mono);
  font-size: 0.8rem;
}

.op-fallback-signals {
  padding-top: var(--op-space-sm);
  border-top: 1px solid rgba(150, 150, 170, 0.15);
}

.op-fallback-signals ul {
  margin: var(--op-space-sm) 0 0 0;
  padding-left: var(--op-space-lg);
}

.op-fallback-signals li {
  font-size: 0.85rem;
  color: var(--op-text-secondary);
  margin-bottom: var(--op-space-xs);
}

.op-summary-fallback-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--op-space-md);
  padding-top: var(--op-space-sm);
  border-top: 1px solid rgba(150, 150, 170, 0.15);
}

.op-fallback-note {
  font-size: 0.75rem;
  color: var(--op-text-secondary);
  font-style: italic;
}

.op-summary-fallback .op-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-xs);
  padding: var(--op-space-xs) var(--op-space-sm);
  border-color: rgba(150, 150, 170, 0.4);
  color: var(--op-text-secondary);
  min-height: 32px;
}

.op-summary-fallback .op-retry-btn:hover {
  background: rgba(150, 150, 170, 0.1);
  border-color: var(--op-accent-color);
  color: var(--op-accent-color);
}

/* ===== V3.3 Security Context Section ===== */
.op-security-section {
  margin-bottom: var(--op-space-lg);
}

.op-security-context {
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 152, 0, 0.05) 100%);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.op-security-header {
  display: flex;
  align-items: center;
  gap: var(--op-space-sm);
  padding: var(--op-space-md) var(--op-space-lg);
  background: rgba(255, 193, 7, 0.1);
  border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.op-security-icon {
  font-size: 1.1rem;
}

.op-security-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffd54f;
  flex: 1;
}

.op-security-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.15);
  color: #ffcc80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.op-security-note {
  padding: var(--op-space-sm) var(--op-space-lg);
  font-size: 0.75rem;
  color: var(--op-text-secondary);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
  font-style: italic;
}

.op-security-alerts {
  padding: var(--op-space-md) var(--op-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-md);
}

.op-security-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-md);
  padding: var(--op-space-md);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: var(--op-line-height-normal);
}

.op-security-alert-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.op-security-alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-xs);
}

.op-security-alert-content strong {
  font-size: 0.85rem;
  font-weight: 600;
}

.op-security-alert-content p {
  font-size: 0.8rem;
  margin: 0;
  opacity: 0.9;
}

.op-security-alert-details {
  margin: var(--op-space-sm) 0 0 0;
  padding-left: var(--op-space-lg);
  font-size: 0.75rem;
  opacity: 0.8;
  list-style: disc;
}

.op-security-alert-details li {
  margin-bottom: var(--op-space-xs);
  font-family: var(--op-font-mono);
}

.op-security-alert-warning {
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ffcc80;
}

.op-security-alert-warning strong {
  color: #ffd54f;
}

.op-security-alert-info {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.op-security-alert-info strong {
  color: #c7d2fe;
}

.op-security-alert-danger {
  background: rgba(213, 0, 0, 0.12);
  border: 1px solid rgba(213, 0, 0, 0.3);
  color: #ff8a80;
}

.op-security-alert-danger strong {
  color: #ff5252;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .op-candidate-address-row {
    flex-wrap: wrap;
  }
  
  .op-address {
    flex: 0 0 100%;
    margin-bottom: var(--op-space-sm);
  }
  
  .op-reasons-grid {
    grid-template-columns: 1fr;
  }
  
  .op-summary-header {
    flex-direction: column;
    gap: var(--op-space-md);
    align-items: flex-start;
  }
  
  .op-explainer-modal {
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
    position: absolute;
    bottom: 0;
  }
  
  .op-signal-row {
    flex-wrap: wrap;
  }
  
  .op-signal-name {
    flex: 0 0 100%;
    margin-bottom: var(--op-space-xs);
  }
  
  .op-strength-label {
    flex: 0 0 80px;
  }
  
  /* V3.1: Preview mode responsive */
  .op-preview-header {
    flex-direction: column;
    gap: var(--op-space-sm);
    align-items: flex-start;
  }
  
  .op-preview-address {
    font-size: 0.9rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .op-preview-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--op-space-sm);
  }
  
  .op-summary-left {
    width: 100%;
  }
  
  .op-stability-badge {
    font-size: 0.75rem;
    padding: var(--op-space-xs) var(--op-space-sm);
  }
  
  /* Summary responsive */
  .op-profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .op-summary-card-header {
    flex-direction: column;
    gap: var(--op-space-sm);
    align-items: flex-start;
  }
  
  .op-summary-interpretation {
    font-size: 0.9rem;
    padding: var(--op-space-md);
  }
  
  .op-summary-profile {
    padding: var(--op-space-md);
  }
  
  .op-summary-alerts {
    padding: var(--op-space-md);
  }
  
  .op-candidate-header {
    padding: var(--op-space-sm);
  }
  
  .op-candidate-details {
    padding: 0 var(--op-space-sm) var(--op-space-sm) var(--op-space-sm);
  }
}

@media (max-width: 480px) {
  .op-profile-grid {
    grid-template-columns: 1fr;
  }
  
  .op-candidate-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .op-preview-card {
    padding: var(--op-space-md);
  }
  
  .op-info-modal-content,
  .op-deep-confirm-content {
    padding: var(--op-space-md);
  }
  
  .op-deep-confirm-footer {
    padding: var(--op-space-md);
  }
  
  .op-explainer-body {
    padding: var(--op-space-md);
  }
}