/* ── Settings page ─────────────────────────────────────────────────────────── */
.settings-card { margin-bottom: 1.5rem; }
.settings-card h2 { margin-top: 0; margin-bottom: 0.4rem; }
.settings-desc { color: var(--text-muted, #888); font-size: 0.88rem; margin-bottom: 1.2rem; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.save-feedback { color: var(--color-success-text, #4caf50); font-size: 0.85rem; font-weight: 600; }

.color-row { display: flex; gap: 0.6rem; align-items: center; }
.color-row input[type="color"] {
  width: 44px;
  height: 38px;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}
.color-row input[type="text"] {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--bg, #0a0a0f);
  color: var(--text, #eee);
  font-size: 0.9rem;
  outline: none;
  font-family: var(--mono, monospace);
}
.color-row input[type="text"]:focus { border-color: var(--accent, #6366f1); }

.logo-preview {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border, #333);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-placeholder { font-size: 0.72rem; color: var(--text-muted, #555); text-align: center; }

/* ── Restore guide ───────────────────────────────────────────────────────── */
.restore-guide { margin-top: 1.5rem; }
.restore-guide h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #888); margin-bottom: 0.6rem; }
.restore-guide ol { padding-left: 1.4rem; line-height: 2; font-size: 0.88rem; color: var(--text-muted, #aaa); }
.restore-guide code {
  background: var(--surface2, #1a1a1a);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.82rem;
  font-family: var(--mono, monospace);
}
.restore-guide a { color: var(--accent, #6366f1); }

/* ── About grid ──────────────────────────────────────────────────────────── */
.about-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.about-row { display: flex; gap: 1rem; font-size: 0.88rem; }
.about-label { color: var(--text-muted, #888); min-width: 80px; }