body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 20px;
  background: var(--tg-theme-bg-color, #0f0f0f);
  color: var(--tg-theme-text-color, #ffffff);
  max-width: 480px;
  margin: 0 auto;
}

h2 { margin-bottom: 16px; font-size: 1.3rem; }
h3 { margin-top: 16px; margin-bottom: 8px; font-size: 1rem; color: #aaa; }

input[type="tel"],
input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: white;
  font-size: 1rem;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 13px;
  margin-top: 12px;
  border-radius: 10px;
  border: none;
  background: var(--tg-theme-button-color, #2ea6ff);
  color: var(--tg-theme-button-text-color, white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

button:active { opacity: 0.8; }

button.secondary {
  background: #2a2a2a;
  color: #aaa;
}

label {
  display: block;
  margin-top: 10px;
  cursor: pointer;
}

label input { width: auto; margin-right: 8px; }

.chat {
  padding: 14px 12px;
  border-bottom: 1px solid #222;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
}

.chat:hover, .chat:active { background: #1a1a1a; }

.error {
  color: #ff6b6b;
  font-size: 0.875rem;
  margin-top: 8px;
  min-height: 20px;
}

.loader { color: #aaa; padding: 20px 0; }

.progress-bar {
  width: 100%;
  height: 8px;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
  margin: 16px 0 8px;
}

#progress-fill {
  height: 100%;
  background: #2ea6ff;
  border-radius: 4px;
  transition: width 0.3s ease;
}

#progress-text { color: #aaa; font-size: 0.875rem; }

a.download-btn {
  display: block;
  text-align: center;
  padding: 14px;
  background: #27ae60;
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 16px;
}