/* ---------- ТЕМИ (светла/тъмна) ---------- */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --surface: #f6f6f7;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-contrast: #ffffff;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
}

body.dark-theme {
  --bg: #0f1115;
  --text: #e7eaf0;
  --muted: #a6adbb;
  --surface: #151923;
  --border: #232938;
  --accent: #60a5fa;
  --accent-contrast: #0b0e14;
}

/* Авто-настройка по системна тема (ако потребителят не е натиснал бутона) */
@media (prefers-color-scheme: dark) {
  body.light-theme:not(.force-light):not(.force-dark) {
    /* нищо – остава светъл по подразбиране */
  }
  body:not(.light-theme):not(.force-light) {
    --bg: #0f1115;
    --text: #e7eaf0;
    --muted: #a6adbb;
    --surface: #151923;
    --border: #232938;
    --accent: #60a5fa;
    --accent-contrast: #0b0e14;
    background: var(--bg);
    color: var(--text);
  }
}

/* ---------- БАЗОВИ СТИЛОВЕ И МАКС ШИРИНА 900px ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s ease, color .25s ease;
}

/* Ограничаваме съдържанието до 800px и го центрираме */
header, main, footer {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------- ХЕДЪР ---------- */
header {
  padding-top: 24px;
  padding-bottom: 10px;
}
header h1 {
  margin: 0 0 10px 0;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .2px;
}
.header-image {
  width: 100%;
  max-height: 377px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: block;
  margin: 12px 0 16px 0;
}

/* Контроли (тема/шрифт) */
.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px 0;
}
.controls button {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: t