:root {
  /* фолбэки, если открыто не в Telegram */
  --tg-theme-bg-color: #17212b;
  --tg-theme-text-color: #f5f5f5;
  --tg-theme-hint-color: #7d8b99;
  --tg-theme-secondary-bg-color: #232e3c;
  --tg-theme-link-color: #6ab3f3;
  --tg-theme-destructive-text-color: #ec3942;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px;
  background: var(--tg-theme-bg-color);
}

.title { font-size: 16px; font-weight: 600; }

.status { font-size: 12px; color: var(--tg-theme-hint-color); }
.status.stale { color: var(--tg-theme-destructive-text-color); }

.error {
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-destructive-text-color);
  font-size: 13px;
  white-space: pre-wrap;
}

.table-wrap { overflow-x: auto; padding: 0 8px 24px; }

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th, td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
}

th {
  position: sticky;
  top: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tg-theme-hint-color);
  background: var(--tg-theme-bg-color);
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

tbody tr:active { background: var(--tg-theme-secondary-bg-color); }

.id { color: var(--tg-theme-hint-color); }

.left-ok { color: var(--tg-theme-text-color); }
.left-warn { color: #e0a106; font-weight: 600; }
.left-exp { color: var(--tg-theme-destructive-text-color); font-weight: 600; }

.flash { animation: flash .8s ease-out; }
@keyframes flash {
  from { background: rgba(106, 179, 243, .25); }
  to   { background: transparent; }
}

.empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--tg-theme-hint-color);
}

/* --- Вкладки --- */
.tabs {
  display: flex;
  gap: 8px;
  padding: 0 12px 8px;
}
.tab {
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.tab.active {
  background: var(--tg-theme-link-color);
  color: #fff;
}

/* --- Пользователи (админка) --- */
.users { padding: 0 12px 24px; }
.user {
  padding: 10px 0;
  border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
}
.u-main { font-size: 14px; margin-bottom: 6px; }
.u-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.u-ctl select,
.u-ctl button {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
}
.u-ctl button.danger { color: var(--tg-theme-destructive-text-color); }
.u-ctl label { display: inline-flex; align-items: center; gap: 4px; }
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-hint-color);
}
.badge.st-approved { color: #1aab4b; }
.badge.st-pending  { color: #e0a106; }
.badge.st-blocked  { color: var(--tg-theme-destructive-text-color); }
.badge.st-in_work  { color: #6ab3f3; }
.badge.st-review   { color: #e0a106; }
.badge.st-success  { color: #1aab4b; }
.badge.st-failed   { color: var(--tg-theme-destructive-text-color); }

/* кнопка «В работу» в таблице */
button.take {
  background: var(--tg-theme-link-color);
  color: #fff; border: none;
  padding: 5px 10px; border-radius: 6px; font-size: 12px;
}

/* карточки «В работе» / «Проверка» */
.cards { padding: 8px 12px 24px; }
.card {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--tg-theme-secondary-bg-color);
}
.card .u-ctl { margin-top: 8px; }
.card input.rate { width: 90px; }
.card button {
  border: none; border-radius: 6px; padding: 6px 12px; font-size: 13px;
  background: var(--tg-theme-link-color); color: #fff;
}
.card button:disabled { opacity: .5; }
.card button.danger { background: var(--tg-theme-destructive-text-color); }
.card .file {
  display: inline-block; padding: 6px 12px; border-radius: 6px;
  background: var(--tg-theme-bg-color); cursor: pointer; font-size: 13px;
}
.card .att {
  display: inline-block; margin-right: 8px; font-size: 12px;
  color: var(--tg-theme-link-color); text-decoration: none;
}