:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #181818;
  color: #f7f4ec;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #181818;
}

/* Tela de entrada (nossa camada antes do iframe do JaaS). */
.entry {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}

.entry[hidden] {
  display: none;
}

.entry__card {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.entry__brand {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a24b;
}

.entry__title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.entry__title span {
  color: #f7f4ec;
  white-space: nowrap;
}

.entry__lead {
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #cfc9bd;
}

.entry__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.entry__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #e6e1d6;
}

.entry__input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #f7f4ec;
  background: #242424;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.entry__input::placeholder {
  color: #8a857b;
}

.entry__input:focus {
  outline: none;
  border-color: #c9a24b;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.25);
}

.entry__button {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9375rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #181818;
  background: #f7f4ec;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 60ms ease;
}

.entry__button:hover {
  background: #ffffff;
}

.entry__button:active {
  transform: translateY(1px);
}

.entry__button:focus-visible {
  outline: 2px solid #c9a24b;
  outline-offset: 2px;
}

.entry__note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: #8a857b;
}

/* Container do iframe do JaaS. */
.meeting {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #181818;
}

.meeting[hidden] {
  display: none;
}

.meeting iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.loading {
  max-width: min(32rem, calc(100vw - 32px));
  margin: 0;
  color: #d8d2c6;
  line-height: 1.5;
  text-align: center;
}