.site-settings-container { max-width: 600px; }
.site-settings-container h2 { font-size: var(--fs-xl); margin-bottom: var(--spacing-xl); }

.settings-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}
.settings-card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--fs-base); font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--text-on-accent); background: var(--accent);
}
.settings-card-body { padding: var(--spacing-lg); }
.settings-card-body .field { margin-bottom: var(--spacing-md); }
.settings-card-body .field:last-child { margin-bottom: 0; }

.favicon-preview {
  display: flex; align-items: center; gap: var(--spacing-lg);
}
.favicon-preview-img {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--bg-surface-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--text-muted);
}
.favicon-preview-actions { display: flex; flex-direction: column; gap: var(--spacing-xs); }

.alignment-options {
  display: flex; gap: var(--spacing-sm);
}
.alignment-option {
  flex: 1; padding: var(--spacing-md); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition-fast);
  font-size: var(--fs-sm);
}
.alignment-option:hover { border-color: var(--accent); }
.alignment-option.active { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.alignment-option-icon { font-size: 1.2rem; margin-bottom: 4px; }