/* Telegram supplies the palette through CSS variables on the WebApp document.
   Reading them with fallbacks means the app follows the user's Telegram theme --
   including dark mode -- without shipping a second stylesheet or a toggle. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #16181a);
  --muted: var(--tg-theme-hint-color, #74797f);
  --card: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --accent: var(--tg-theme-button-color, #2c7be5);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--muted) 30%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 max(1rem, env(safe-area-inset-bottom));
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}

.muted { color: var(--muted); font-size: .85em; }

.tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; overflow-x: auto; }
.tabs button, .seg button {
  flex: 0 0 auto; padding: .45rem .8rem; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--fg);
  font: inherit; font-size: .9em; cursor: pointer;
}
.tabs button.on, .seg button.on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

main { padding: 1rem; display: grid; gap: 1rem; }
h3 { margin: .5rem 0 0; font-size: 1em; }

.seg { display: flex; gap: .25rem; }

.field { display: grid; gap: .35rem; }
.field > span { font-size: .85em; color: var(--muted); }

textarea, input[type="file"], input[type="number"], select {
  width: 100%; padding: .6rem; font: inherit; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
}
textarea { resize: vertical; }

/* Options are rendered as pill rows, mirroring the bot's inline keyboards so the
   two surfaces do not teach different mental models. */
.row { display: grid; gap: .3rem; margin-bottom: .6rem; }
.row > span { font-size: .8em; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.pill {
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--fg); font: inherit; font-size: .85em; cursor: pointer;
}
.pill.on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

button.primary {
  padding: .8rem; border: 0; border-radius: .6rem; font: inherit; font-weight: 600;
  background: var(--accent); color: var(--accent-fg); cursor: pointer;
}
button.primary[disabled] { opacity: .55; cursor: progress; }
button.ghost {
  padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .5rem;
  background: transparent; color: var(--fg); font: inherit; cursor: pointer;
}

.msg { min-height: 1.2em; margin: 0; font-size: .9em; }
.msg.bad { color: #d1414b; }
.msg.good { color: #1f9254; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list li {
  padding: .6rem .75rem; background: var(--card); border-radius: .5rem;
  display: grid; gap: .35rem;
}
.list li .who { font-size: .8em; color: var(--muted); }
.list li .acts { display: flex; gap: .4rem; flex-wrap: wrap; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; }
.cards div { background: var(--card); border-radius: .5rem; padding: .6rem; }
.cards b { display: block; font-size: 1.3em; }

.plan { background: var(--card); border-radius: .5rem; padding: .75rem; margin-bottom: .5rem; }
.plan h4 { margin: 0 0 .25rem; }

/* Long output must scroll inside its own box; the page itself must never scroll
   sideways on a phone. */
.out { background: var(--card); border-radius: .5rem; padding: .6rem; overflow-x: auto; font-size: .8em; }
img.qr { max-width: 100%; border-radius: .5rem; }