:root {
  --primary: #4CAF50;
  --primary-dark: #388E3C;
  --bg: #FFF8E1;
  --card-bg: #FFFFFF;
  --text: #2C3E50;
  --radius: 18px;
  --btn-padding: 16px 28px;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Comic Neue', 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
}
.app-header {
  background: var(--primary); color: white; text-align: center;
  padding: 18px; font-size: 1.5rem; font-weight: bold; border-bottom: 4px solid var(--primary-dark);
}
.container { max-width: 600px; margin: 20px auto; padding: 0 16px; }
.card {
  background: var(--card-bg); border-radius: var(--radius); padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px;
}
.btn {
  display: inline-block; background: var(--primary); color: white;
  border: none; padding: var(--btn-padding); border-radius: var(--radius);
  font-size: 1.1rem; cursor: pointer; text-align: center; width: 100%;
  transition: 0.2s;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.progress-bar { height: 10px; background: #E0E0E0; border-radius: 5px; margin: 10px 0; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); transition: width 0.3s; }
.checklist-item { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 1rem; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--primary); }
.qr-preview { margin-top: 10px; background: white; padding: 10px; border-radius: 12px; text-align: center; }
#qr-canvas { display: none; }
/* === ПЕЧАТЬ === */
@media print {
  /* Скрываем только управляющие элементы */
  .no-print,
  header,
  footer,
  button,
  .app-header {
    display: none !important;
  }

  /* Показываем контент для печати */
  body {
    background: white !important;
    color: black !important;
    font-size: 14pt;
  }

  .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid; /* Не разрывать карточку между страницами */
    margin: 10px 0 !important;
    padding: 15px !important;
  }

  /* Гарантируем отображение картинок */
  img {
    max-width: 100%;
    height: auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ссылки не делаем кликабельными на печати */
  a {
    text-decoration: none;
    color: black;
  }
}
/* === ПЕЧАТЬ: метки квеста === */
@media print {
  @page { margin: 1cm; }

  /* Скрываем ВСЁ, кроме блока с метками */
  body * {
    visibility: hidden;
  }

  /* Показываем только контейнер с метками и его содержимое */
  #qr-list,
  #qr-list *,
  .print-only,
  .print-only * {
    visibility: visible !important;
    display: block !important;
  }

  /* Стили для карточек при печати */
  #qr-list .card,
  .print-only {
    border: 2px solid #000 !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    background: #fff !important;
    color: #000 !important;
  }

  /* Картинки */
  #qr-list img {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
    margin: 15px auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Текст */
  #qr-list h4,
  #qr-list p {
    margin: 8px 0 !important;
    color: #000 !important;
    font-size: 14pt !important;
  }

  /* Скрываем кнопку печати (она не нужна на бумаге) */
  #print-btn,
  .no-print {
    display: none !important;
  }
}