:root {
  --bg: var(--tg-theme-bg-color, #17212b);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --hint: var(--tg-theme-hint-color, #8b9aa7);
  --accent: var(--tg-theme-button-color, #5288c1);
  --on-accent: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #232e3c);
  --bad: var(--tg-theme-destructive-text-color, #ec3942);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 480px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.lock { font-size: 44px; text-align: center; }
h1 { margin: 0; font-size: 20px; text-align: center; }
.card { background: var(--card); border-radius: 14px; padding: 14px 16px; }
.state { text-align: center; min-height: 1.5em; }
.state.bad { color: var(--bad); }
label { display: block; color: var(--hint); margin-bottom: 6px; }
input { width: 100%; font: inherit; font-size: 24px; letter-spacing: 6px; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid var(--hint); background: var(--bg); color: var(--text); }
button { width: 100%; font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); }
button:disabled { opacity: .5; }
[hidden] { display: none !important; }