:root {
  color-scheme: light;
  --whatsapp-green: #008069;
  --whatsapp-green-dark: #006b58;
  --ink: #111b21;
  --muted: #667781;
  --background: #efeae2;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--background); }
a:focus-visible { outline: 3px solid rgba(0, 128, 105, .35); outline-offset: 3px; }

.whatsapp-header {
  display: flex;
  min-height: 4rem;
  align-items: center;
  padding: max(.65rem, env(safe-area-inset-top)) 1rem .65rem;
  color: white;
  background: var(--whatsapp-green);
}

.back-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: .4rem;
  color: white;
  text-decoration: none;
}

.back-button:hover { background: rgba(255, 255, 255, .12); }
.back-button svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.join-content {
  display: flex;
  width: min(100%, 42rem);
  min-height: calc(100vh - 4rem);
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  padding: clamp(2rem, 8vh, 5rem) 1.25rem 7rem;
  text-align: center;
}

.join-content h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.intake-subtitle {
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.qr-frame {
  width: min(19rem, 80vw);
  margin-top: clamp(2rem, 6vh, 3.5rem);
  border: 1px solid #d5d0c8;
  padding: .85rem;
  background: white;
}

.qr-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; }

.join-button {
  display: flex;
  width: min(22rem, 100%);
  min-height: 3.4rem;
  margin-top: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--whatsapp-green-dark);
  border-radius: .45rem;
  padding: .75rem 1rem;
  color: white;
  background: var(--whatsapp-green);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.join-button:hover { background: var(--whatsapp-green-dark); }
.join-button.is-disabled { border-color: #9aa5ab; color: #f8fafc; background: #9aa5ab; cursor: not-allowed; }
.hidden { display: none !important; }

@media (max-width: 420px) {
  .join-content { padding-inline: 1rem; }
  .join-content h1 { font-size: 2rem; }
}