:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --error: var(--tg-theme-destructive-text-color, #d93025);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}

h1 { font-size: 22px; margin: 0 0 8px; }

.hint { color: var(--hint); }
.small { font-size: 13px; }
.error { color: var(--error); }

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 4px 16px;
  margin: 16px 0;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hint) 25%, transparent);
  overflow-wrap: anywhere;
}

.row:last-child { border-bottom: 0; }
.label { color: var(--hint); flex: none; }