:root {
    --background: #eef2f1;
    --card: #fff;
    --text: #14201d;
    --card-text: #5b6b66;
    --border: #cfd9d6;
    --button: #0f766e;
    --button-text: #fff;
    --error: #b42318;

    box-sizing: border-box;
  }

  * { box-sizing: border-box; }

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

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: var(--background);
    color: var(--text);
    font: 16px "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  }

  main {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px;
  }

  h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }

  p.main-text {
    margin: 0 0 24px;
    color:
    var(--card-text);
  }

  label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }

  input[type=email] {
    width: 100%;
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  input[type=email]:focus-visible,
  button:focus-visible,
  .terms input:focus-visible {
    outline: 3px solid var(--button);
    outline-offset: 2px;
  }

  .terms {
    display: flex;
    gap: 10px;
    margin: 16px 0 20px;
    font-size: .9rem;
    color: var(--card-text);
  }

  .terms input {
    margin-top: 3px;
  }

  button {
    width: 100%;
    font: inherit;
    font-weight: 600;
    padding: 13px;
    background: var(--button);
    color: var(--button-text);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }

  button[disabled] {
    opacity: .6;
    cursor: wait;
  }

  .message {
    min-height: 1.4em;
    margin: 12px 0 0;
    font-size: .92rem;
    color: var(--error);
  }

  .connected { text-align: center; }

  .connected p { color: var(--card-text); }

  [hidden] { display: none !important; }

  .header-img{
    max-width: 100%;
    margin-bottom: 20px;
  }