/*
 * ТЕеАТР: одиночные страницы с формой или сообщением (обратная связь, 404, вход, установка).
 * Одна колонка на бумаге, над ней чайная полоса с названием.
 */
.form-page, .auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
}
.page-mast { background: var(--tea); color: var(--on-tea); --focus: var(--on-tea); }
.page-mast-in { max-width: 640px; margin: 0 auto; padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); }
.page-mast a { display: inline-flex; align-items: center; min-height: var(--control); color: inherit; text-decoration: none; font: 700 var(--step-4) / 1 var(--font-display); letter-spacing: -0.01em; }
.page-mast .ee, .brand-ee { color: #f08f76; }
.page-mast p { color: var(--on-tea-2); }

.page-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-8); display: grid; gap: var(--s-4); align-content: start; }
.page-main h1, .page-main h2 { font: 600 var(--step-4) / 1.15 var(--font-display); letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }

.card { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--paper-2); }
.card label { display: grid; gap: var(--s-1); font-size: var(--step-1); font-weight: 700; color: var(--ink-2); }
.card input, .card textarea, .card select {
  width: 100%;
  min-height: var(--control);
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: var(--paper);
  font-weight: 400;
  color: var(--ink);
}
.card textarea { min-height: 144px; resize: vertical; line-height: 1.5; }
.card input::placeholder, .card textarea::placeholder { color: var(--ink-2); opacity: 1; }
.card .hint { font-size: var(--step-1); color: var(--ink-2); }
.card .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

.btn, .ghost {
  min-height: var(--control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  border: 0;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1), opacity var(--dur-2);
}
.ghost { background: var(--paper-3); color: var(--ink); }
@media (hover: hover) { .btn:hover { opacity: 0.88; } .ghost:hover { background: var(--paper-3); filter: brightness(0.96); } }
.btn:active, .ghost:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }

.flash { padding: var(--s-3) var(--s-4); font-weight: 600; background: var(--paper-2); }
.flash.ok { color: var(--ok); }
.flash.bad { color: var(--danger); }

.not-found .big { font: 700 clamp(5rem, 22vw, 9rem) / 0.9 var(--font-display); color: var(--coral); }