@import url('../../shared/css/styles.css');

.result-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}
.card-header h3 { margin: 0; }

.hash-hex {
  font-family: monospace;
  font-size: var(--font-md);
  word-break: break-all;
  line-height: 1.6;
  padding: var(--spacing-sm);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.hash-meta {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* Hex color bars */
.hex-bars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--spacing-sm);
}
.hex-block {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

.diff-bars-label {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
  margin-bottom: 4px;
}

/* Avalanche effect bar */
.avalanche {
  margin-top: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.avalanche-label {
  font-weight: 500;
  font-size: var(--font-sm);
  min-width: 80px;
}
.avalanche-bar {
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: var(--color-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.avalanche-fill {
  height: 100%;
  background: linear-gradient(90deg, #27ae60, #f39c12, #e74c3c);
  border-radius: 4px;
  transition: width var(--transition-normal) ease;
}
.avalanche-value {
  font-size: var(--font-sm);
  font-family: monospace;
  color: var(--color-text-muted);
}

.loading {
  color: var(--color-text-muted);
  font-style: italic;
}