.compare__header { text-align: center; margin-bottom: var(--space-2xl); }
.compare__empty { text-align: center; padding: var(--space-4xl) var(--space-xl); color: var(--color-text-secondary); }
.compare__browse-link { font-size: 1.125rem; color: var(--color-accent); }
.compare__panels { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-xl); align-items: stretch; margin-bottom: var(--space-2xl); }
.compare__panels[hidden] { display: none; }
.compare__panel { background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; min-height: 300px; }
.compare__vs { display: flex; align-items: center; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-text-tertiary); font-style: italic; }
.compare__panel-content { padding: var(--space-xl); }
.compare__panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-md); }
.compare__panel-name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--origin-color); }
.compare__unpin { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.compare__unpin:hover { border-color: var(--color-accent); color: var(--color-accent); }
.compare__panel-region { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
.compare__panel-meta { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.compare__panel-meta div { display: flex; justify-content: space-between; }
.compare__panel-meta .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); }
.compare__panel-meta span:last-child { font-family: var(--font-mono); font-size: 0.85rem; }
.compare__panel-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.compare__panel-notes { font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.compare__panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--space-2xl); color: var(--color-text-tertiary); text-align: center; }
.compare__panel-empty a { margin-top: var(--space-md); color: var(--color-accent); }
.compare__wheel-section { text-align: center; }
.compare__wheel-section[hidden] { display: none; }
.compare__wheel-section h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-tertiary); margin-bottom: var(--space-xl); }
.compare__wheel-container { max-width: 400px; margin: 0 auto var(--space-lg); }
.compare__wheel-legend { display: flex; justify-content: center; gap: var(--space-xl); }
.compare__legend-item { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.85rem; color: var(--color-text-secondary); }
.compare__legend-swatch { width: 20px; height: 3px; border-radius: 2px; }
.compare__legend-swatch--dashed { background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px); }
@media (max-width: 768px) {
  .compare__panels { grid-template-columns: 1fr; gap: var(--space-md); }
  .compare__vs { justify-content: center; padding: var(--space-sm) 0; }
}