:root {
  /* defaults via CSS variables (override per-hotel) */
  /* page */
  --hq-bg: #0b1220; /* legacy */
  --hq-bg-color: #0b1220;
  --hq-bg-image: none;
  --hq-bg-repeat: no-repeat;
  --hq-bg-size: auto;
  --hq-bg-position: center;
  --hq-text: #e8eefc;
  --hq-muted: rgba(232, 238, 252, 0.7);

  /* cards */
  --hq-card-bg: #111a2d;
  --hq-card-text: var(--hq-text);
  --hq-card-border: rgba(255,255,255,0.08);
  --hq-radius: 14px;

  /* primary button */
  --hq-btn-primary-bg: #3b82f6;
  --hq-btn-primary-text: #081021;
}

html {
  min-height: 100%;
  background-color: var(--hq-bg-color, var(--hq-bg));
  background-image: var(--hq-bg-image, none);
  background-repeat: var(--hq-bg-repeat, no-repeat);
  background-size: var(--hq-bg-size, auto);
  background-position: var(--hq-bg-position, center);
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--hq-text);
}

.hq-container {
  max-width: 920px;
  padding: 24px;
  margin: 0 auto;
}

.hq-card {
  background: var(--hq-card-bg);
  border: 1px solid var(--hq-card-border);
  border-radius: var(--hq-radius);
  color: var(--hq-card-text);
  padding: 18px;
}

.hq-muted { color: var(--hq-muted); }

/* Intro должен подчиняться "цвету текста страницы" */
.hq-intro {
  color: var(--hq-text);
  opacity: 0.92;
  line-height: 1.45;
}

/* Прогресс на странице квеста должен подчиняться "цвету текста страницы" */
.hq-progress {
  color: var(--hq-text);
  opacity: 0.86;
}

.hq-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hq-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--hq-text);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
}

.hq-btn-primary {
  background: var(--hq-btn-primary-bg);
  border-color: var(--hq-btn-primary-bg);
  color: var(--hq-btn-primary-text);
  font-weight: 600;
}

/* Inputs: inherit surrounding text color (page or card) */
.hq-input {
  color: inherit;
  caret-color: currentColor;
}

.hq-input::placeholder {
  color: currentColor;
  opacity: 0.6;
}

/* Hotel визитка (настройки через CSS variables) */
.hq-hotel {
  color: var(--hq-text);
}

.hq-hotel .hq-card,
.hq-hotel .hq-quest-card {
  background: var(--hq-card-bg);
  border: 1px solid var(--hq-card-border);
  border-radius: var(--hq-radius);
}

.hq-hotel .hq-section {
  margin-top: 16px;
}

.hq-hotel .hq-section-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.hq-hotel .hq-quests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .hq-hotel .hq-quests {
    grid-template-columns: 1fr;
  }
}

.hq-hotel .hq-quest-card {
  padding: 14px;
}

.hq-hotel .hq-quest-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.hq-hotel .hq-quest-meta {
  opacity: 0.75;
  font-size: 12px;
  margin-bottom: 12px;
}

.hq-hotel .hq-quest-actions {
  display: flex;
  gap: 8px;
}

/* Task page: less “card” look, content directly on page background */
.hq-task {
  color: var(--hq-text);
}

.hq-task-content {
  color: var(--hq-text);
}

.hq-task-meta {
  color: var(--hq-text);
  opacity: 0.72;
}