/* Colors default to sane light-theme values, then get overridden inline (in
   app.js) with the real values from Telegram.WebApp.themeParams so the page
   matches whatever theme the user's Telegram client is using. The
   prefers-color-scheme fallback below only matters if this page is ever
   opened outside Telegram (e.g. while developing). */
:root {
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #222222;
  --tg-theme-hint-color: #999999;
  --tg-theme-link-color: #2481cc;
  --tg-theme-button-color: #2481cc;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #f4f4f5;
  --tg-theme-destructive-text-color: #d14343;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tg-theme-bg-color: #17212b;
    --tg-theme-text-color: #f5f5f5;
    --tg-theme-hint-color: #8896a0;
    --tg-theme-link-color: #6ab3f3;
    --tg-theme-button-color: #5288c1;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #232e3c;
    --tg-theme-destructive-text-color: #ec7070;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.screen[hidden] {
  display: none;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 12px;
}

h2 {
  font-size: 1.05rem;
  margin: 24px 0 8px;
}

p {
  margin: 0 0 12px;
}

.hint {
  color: var(--tg-theme-hint-color);
  font-size: 0.9rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--tg-theme-hint-color);
}

input[type="text"],
input[type="email"],
textarea {
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--tg-theme-hint-color);
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
  font-family: inherit;
}

textarea {
  resize: vertical;
}

.file-label {
  border: 1px dashed var(--tg-theme-hint-color);
  border-radius: 10px;
  padding: 20px 12px;
  text-align: center;
  background: var(--tg-theme-secondary-bg-color);
  cursor: pointer;
}

.file-label input[type="file"] {
  display: none;
}

button {
  font-family: inherit;
  font-size: 16px;
  border-radius: 12px;
  padding: 12px 16px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--tg-theme-button-color);
  color: var(--tg-theme-button-text-color);
  font-weight: 600;
}

.btn-primary:disabled {
  opacity: 0.6;
}

.btn-secondary {
  background: transparent;
  color: var(--tg-theme-link-color);
  margin-top: 8px;
}

.card {
  background: var(--tg-theme-secondary-bg-color);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.request-item {
  background: var(--tg-theme-secondary-bg-color);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.request-item .status {
  font-weight: 600;
}

.error-banner {
  background: #ffe8e8;
  color: #a02020;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.error-banner[hidden] {
  display: none;
}