:root {
  --bg: #faf7f2; --fg: #1f1a15; --card: #fff; --muted: #8a7f72;
  --accent: #d9482b; --ok: #3d8b40; --line: #e6ded2;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171412; --fg: #ece5da; --card: #211d19; --muted: #93887a; --line: #322c25; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }

a { color: var(--accent); }

.map__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.map__header h1 { margin: 0; font-size: 24px; }
.map__book { font-size: 15px; text-decoration: none; }

.banner { background: var(--accent); color: #fff; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; font-weight: 600; text-align: center; }

.block { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 12px; }
.block__header { display: flex; justify-content: space-between; align-items: baseline; }
.block__header h2 { margin: 0 0 4px; font-size: 17px; }
.block__progress { color: var(--muted); font-size: 14px; }

.mission { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.mission__marker { width: 1.2em; text-align: center; flex-shrink: 0; }
.mission__title { color: var(--fg); text-decoration: none; }
.mission--done .mission__marker { color: var(--ok); }
.mission--open .mission__marker { color: var(--accent); font-weight: 700; }
.mission--closed .mission__marker,
.mission--closed .mission__title { color: var(--muted); }
.mission--open .mission__title { font-weight: 600; }

.mission__fav { color: var(--accent); margin-left: auto; }
.map__nav { display: flex; gap: 14px; }

.dish-actions { margin-top: 8px; }
.dish-actions .btn-text { margin: 8px auto 0; }
.photo-thumb { display: block; max-width: 140px; margin: 8px auto 0; border-radius: 10px; }

.dish-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin-bottom: 14px; }
.dish-card__photo { width: 100%; border-radius: 8px; display: block; }
.dish-card__title { display: block; margin-top: 8px; font-weight: 600;
  color: var(--fg); text-decoration: none; }
.dish-card__date { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.shopping { margin: 0 0 8px 30px; color: var(--muted); font-size: 14px; }

.dish-input { display: block; width: 100%; margin: 4px 0 16px; padding: 12px;
  font: inherit; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; }
.dish-input::placeholder { color: var(--muted); }

.mission-screen__back { display: inline-block; margin-bottom: 12px; font-size: 15px; text-decoration: none; }
.mission-screen__block { color: var(--muted); font-size: 14px; }
.mission-screen__title { margin: 2px 0 14px; font-size: 24px; }
.mission-screen__shopping { color: var(--muted); margin: 0 0 18px; }
.mission-screen__goal { font-size: 20px; line-height: 1.6; font-weight: 600; margin: 0 0 18px; }
.mission-screen__done-link { display: inline-block; margin-top: 12px; }

.steps { margin: 0 0 20px; padding-left: 24px; }
.steps__item { font-size: 21px; line-height: 1.65; margin-bottom: 16px; }
.steps__item:last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 0 0 20px; padding: 0; }
.checklist__item { min-height: 44px; display: flex; align-items: center; }
.checklist__item label { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 17px; cursor: pointer; }
.checklist__item input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; }

.btn { display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; border: none; border-radius: 12px; font-size: 17px; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.btn[hidden] { display: none; }
.btn--primary { background: var(--accent); color: #fff; }

.debrief-screen .mission-screen__title { margin-bottom: 18px; }
.debrief-q__question { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.debrief-q__options { display: flex; flex-direction: column; gap: 10px; }
.option-btn { width: 100%; min-height: 48px; padding: 12px 16px; text-align: left;
  background: var(--card); color: var(--fg); border: 2px solid var(--line); border-radius: 12px;
  font-size: 16px; cursor: pointer; box-sizing: border-box; }
.option-btn:disabled { cursor: default; opacity: .65; }
.option-btn--selected { border-color: var(--accent); }
.debrief-q__explain { color: var(--muted); margin: 16px 0 0; }
.debrief-q .btn--primary { margin-top: 16px; }

.rescue { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin: 0 0 16px; }

.principle-card { background: var(--card); border: 2px solid var(--accent); border-radius: 16px;
  padding: 20px; text-align: center; }
.principle-card__title { margin: 0 0 8px; font-size: 20px; color: var(--accent); }
.principle-card__text { margin: 0; font-size: 17px; line-height: 1.6; }
.principle-card ~ .btn--primary { margin-top: 16px; }

.principle-card--book { border-width: 1px; text-align: left; padding: 16px; }

.book h1 { margin: 4px 0 16px; font-size: 24px; }
.book__block { margin: 24px 0 10px; font-size: 17px; }
.book__block:first-of-type { margin-top: 8px; }
.book__entry { margin-bottom: 14px; }
.book__source { margin: 6px 4px 0; color: var(--muted); font-size: 13px; }
.book__empty { color: var(--muted); margin-top: 24px; }

.btn-text { display: block; margin: 24px auto 0; padding: 8px; background: none; border: none;
  color: var(--muted); text-decoration: underline; font-size: 15px; cursor: pointer; }
.btn-text[hidden] { display: none; }