/* Цвета — из темы Telegram (светлая или тёмная), запасные значения — для открытия вне Telegram. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1f1f1f);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --button: var(--tg-theme-button-color, #4a7c59);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary: var(--tg-theme-secondary-bg-color, #f1f1f1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 600;
}

#clock {
  margin: 28px 0 4px;
  font-size: 68px;
  font-weight: 300;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

#sub { margin: 0; color: var(--hint); min-height: 1.45em; }

#instruction {
  margin: 24px 0 8px;
  white-space: pre-line;
  text-align: left;
}

#actions {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

button {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 17px;
  font: inherit;
  font-weight: 600;
  background: var(--button);
  color: var(--button-text);
}

button:disabled { opacity: 0.45; }

#finish, #close { background: var(--secondary); color: var(--text); }

#status { margin: 16px 0 0; min-height: 1.45em; }
#hint { margin: 8px 0 0; color: var(--hint); font-size: 14px; }