:root {
  --bg: var(--tg-theme-bg-color, #111);
  --text: var(--tg-theme-text-color, #f2f2f2);
  --hint: var(--tg-theme-hint-color, #9aa0a6);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --sec: var(--tg-theme-secondary-bg-color, #1b1b1b);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

.wrap { max-width: 820px; margin: 0 auto; padding: 16px; }
#title { margin: 0 0 8px 0; font-size: 20px; }
#env { margin: 0 0 16px 0; color: var(--hint); }

.list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.item, .btn-primary {
  background: var(--sec);
  color: var(--text);
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
}
.item:hover, .btn-primary:hover { filter: brightness(1.05); }
.btn-primary { background: var(--btn); color: var(--btn-text); margin-top: 12px; }

.form { background: var(--sec); padding: 12px; border-radius: 12px; margin-bottom: 12px; }
.field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.input {
  width: 100%;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--hint);      /* адаптируется к теме */
  background: var(--sec);             /* адаптируется к теме */
  color: var(--text);                 /* адаптируется к теме */
  outline: none;
  caret-color: var(--text);
}

.input::placeholder {
  color: var(--hint);
  opacity: 1;                         /* на iOS/Firefox */
}

.input:focus {
  border-color: var(--btn);
  box-shadow: 0 0 0 2px rgba(36, 129, 204, 0.25); /* мягкий акцент фокуса */
}

/* Чтобы у select тоже был читабельный текст */
select.input {
  background: var(--sec);
  color: var(--text);
}
.hint { color: var(--hint); margin: 0 0 12px 0; }

/* сетка флагов партнёра/бренда */
.flag-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr)); /* 3 колонки, есть место длинным словам */
  gap: 8px 12px;
}

.flag-cell{
  display: grid;
  grid-template-columns: 1fr auto; /* подпись | кнопка */
  align-items: center;
  min-width: 0; /* позволяет переносить текст внутри */
  position: relative;
}

.flag-label{
  white-space: normal;         /* разрешаем перенос строк */
  overflow-wrap: anywhere;     /* переносим длинные «слова» */
  word-break: break-word;
  user-select: text;           /* можно выделять текст */
  margin-right: 8px;
  pointer-events: none;        /* подпись не перекрывает клики по кнопке */
}

.flag-toggle{
  position: relative;
  z-index: 1;                  /* кнопка поверх всего */
}