/* Оболочка мини-приложения «Метод Элины» — каркас.
   Палитры — из набросков (материалы/мини_приложение/исходники/v1/shell.css): «тёплая» для светлой темы
   Telegram, «тёмная с сиянием» — для тёмной. Тему выбирает Telegram (colorScheme → data-scheme на <html>,
   app.js); без Telegram — настройка системы. Цвета самого Telegram (themeParams — переменные --tg-theme-*,
   их ставит telegram-web-app.js) идут первыми, палитра наброска — запасом; акцент — всегда свой.
   Брать ли фон Telegram или держать свой — решает владелец: для этого достаточно убрать --tg-theme-*
   в блоке «что видит человек». */

@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

/* Палитры — значениями один раз. Тёмная нужна в двух случаях (Telegram сказал «тёмная»; Telegram молчит, а
   система тёмная), и CSS не умеет объединить селектор с @media — поэтому ниже два блока выбора, но в них
   только имена, а цвета живут здесь: поправить тёмную в одном месте и забыть во втором нельзя. */
:root {
  --w-bg: #FBF4EE; --w-card: #FFFFFF; --w-tx: #2B2826; --w-tx2: #56504C; --w-acc: #D2461F;
  --w-ok-tx: #236B40; --w-ok-soft: #DFEEDD; --w-bad-tx: #B3261E; --w-bad-soft: #FDE2DE;
  --w-warn-tx: #865A00; --w-warn-soft: #FFF0C2;

  --d-bg: #1F1C1A; --d-card: #2B2724; --d-tx: #F5F1EC; --d-tx2: #CBC4BD; --d-acc: #E8502A;
  --d-ok-tx: #76CE93; --d-ok-soft: rgba(47, 158, 94, .18); --d-bad-tx: #FF8F86; --d-bad-soft: rgba(229, 72, 77, .17);
  --d-warn-tx: #FFD36B; --d-warn-soft: rgba(242, 181, 58, .16);

  --acc-on: #FFFFFF; --warn: #F2B53A; --r: 16px;
}

/* тёплая (светлая) — по умолчанию */
:root {
  --bg: var(--w-bg); --card: var(--w-card); --tx: var(--w-tx); --tx2: var(--w-tx2); --acc: var(--w-acc);
  --ok-tx: var(--w-ok-tx); --ok-soft: var(--w-ok-soft); --bad-tx: var(--w-bad-tx); --bad-soft: var(--w-bad-soft);
  --warn-tx: var(--w-warn-tx); --warn-soft: var(--w-warn-soft);
}
/* тёмная с сиянием: Telegram сказал «тёмная»… */
:root[data-scheme="dark"] {
  --bg: var(--d-bg); --card: var(--d-card); --tx: var(--d-tx); --tx2: var(--d-tx2); --acc: var(--d-acc);
  --ok-tx: var(--d-ok-tx); --ok-soft: var(--d-ok-soft); --bad-tx: var(--d-bad-tx); --bad-soft: var(--d-bad-soft);
  --warn-tx: var(--d-warn-tx); --warn-soft: var(--d-warn-soft);
}
/* …или Telegram молчит, а система тёмная */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    --bg: var(--d-bg); --card: var(--d-card); --tx: var(--d-tx); --tx2: var(--d-tx2); --acc: var(--d-acc);
    --ok-tx: var(--d-ok-tx); --ok-soft: var(--d-ok-soft); --bad-tx: var(--d-bad-tx); --bad-soft: var(--d-bad-soft);
    --warn-tx: var(--d-warn-tx); --warn-soft: var(--d-warn-soft);
  }
}

/* что видит человек: цвета Telegram, если он их дал, иначе — палитра выше */
:root {
  --c-bg: var(--tg-theme-bg-color, var(--bg));
  --c-card: var(--tg-theme-secondary-bg-color, var(--card));
  --c-tx: var(--tg-theme-text-color, var(--tx));
  --c-tx2: var(--tg-theme-hint-color, var(--tx2));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-tx);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 480px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.title { font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.lead { color: var(--c-tx2); }

.dev-note {
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--warn-soft);
  color: var(--c-tx);
  box-shadow: inset 0 0 0 1.5px var(--warn);
  font-weight: 700;
  font-size: 14px;
}

.btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r);
  background: var(--acc);
  color: var(--acc-on);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible { outline: 2px solid #5AA9F0; outline-offset: 2px; }

.out:empty { display: none; }
.out { padding: 10px 14px; border-radius: var(--r); background: var(--c-card); font-weight: 600; }
.out[data-state="ok"] { background: var(--ok-soft); color: var(--ok-tx); }
.out[data-state="bad"] { background: var(--bad-soft); color: var(--bad-tx); }
.out[data-state="warn"] { background: var(--warn-soft); color: var(--warn-tx); }