/* The staff Telegram decision page: Telegram's own theme colours (its --tg-theme-* variables), with light and dark
   fallbacks outside Telegram. One column, large touch targets; nothing loaded but this file. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1b1b1f);
  --hint: var(--tg-theme-hint-color, #6b6b76);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f6);
  --accent: var(--tg-theme-button-color, #2f6fde);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #d13b3b);
  --ok: #1f9d55;
  --warn-bg: #fff3d6;
  --warn-text: #6b4b00;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17171c);
    --text: var(--tg-theme-text-color, #f2f2f5);
    --hint: var(--tg-theme-hint-color, #9a9aa6);
    --card: var(--tg-theme-secondary-bg-color, #22222a);
    --warn-bg: #3a3017;
    --warn-text: #ffe2a3;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; }
h1 { font-size: 1.3rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 24px 0 8px; }
.meta, .note, .hint { color: var(--hint); margin: 4px 0 12px; }
.hint { font-size: 0.9rem; }
.warn { background: var(--warn-bg); color: var(--warn-text); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.error { color: var(--danger); font-weight: 600; margin: 12px 0; }
.done { color: var(--ok); font-weight: 600; margin: 12px 0; }
.card { background: var(--card); border-radius: 14px; padding: 12px; margin: 12px 0; }
.card h2 { margin: 0 0 8px; }
.card .meta { margin: 0 0 8px; }
.frame { position: relative; border-radius: 10px; overflow: hidden; background: #0003; min-height: 120px; }
.frame img { display: block; width: 100%; height: auto; }
.frame .mark {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
  background: #0009; color: #fff; font-size: 0.8rem; pointer-events: none;
}
.flags { margin: 8px 0 0; padding-left: 18px; color: var(--hint); font-size: 0.92rem; }
.flags .bad { color: var(--danger); }
.row { display: flex; gap: 10px; margin-top: 12px; }
.row button { flex: 1; }
button {
  font: inherit; font-weight: 600; border: 0; border-radius: 12px; padding: 14px 12px; min-height: 48px;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.reject { background: var(--danger); color: #fff; }
button.approve { background: var(--ok); color: #fff; }
button:disabled { opacity: 0.45; cursor: default; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--hint); border-radius: 10px; padding: 10px;
}
textarea { min-height: 140px; resize: vertical; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }