/*
 * round-77 — confirma-email.html.
 *
 * The page originally borrowed `.auth-main` / `.auth-card` / `.auth-hint` from
 * totp.css, but those classes do not exist there — so it rendered as raw
 * flush-left body text under the top bar. This is a small self-contained sheet
 * instead of a guess at another page's internals.
 */

.ce-main {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
  box-sizing: border-box;
}

.ce-card {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(15, 27, 51, 0.08);
  padding: 36px 32px;
  max-width: 520px;
  width: 100%;
  text-align: center;
}

/* Status glyph — swapped by the script (✓ / ✕) so the outcome reads at a glance
   rather than having to be parsed out of a sentence. */
.ce-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  background: #eef1f7;
  color: #6b7280;
}
.ce-card.is-ok .ce-icon { background: #eafaf0; color: #166534; }
.ce-card.is-error .ce-icon { background: #fee2e2; color: #991b1b; }

.ce-card h1 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ce-status {
  font-size: 15px;
  color: #374151;
  margin: 0 0 6px;
  line-height: 1.5;
}

.ce-detail {
  font-size: 13.5px;
  color: #6b7280;
  margin: 0 0 24px;
  line-height: 1.5;
  /* A long address must wrap rather than widen the card. */
  overflow-wrap: anywhere;
}
/* The class sets `display`, so pair it with a [hidden] guard or the attribute
   loses — the recurring footgun in this repo. */
.ce-detail[hidden] { display: none; }

.ce-btn {
  display: inline-block;
  background: #1a3c8f;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.ce-btn:hover { background: #142f72; }
.ce-btn:focus-visible { outline: 2px solid #1a3c8f; outline-offset: 2px; }
.ce-btn[hidden] { display: none; }

@media (max-width: 520px) {
  .ce-main { padding: 24px 14px; }
  .ce-card { padding: 26px 20px; }
}

/* round-88 — the two password-reset pages reuse this sheet's card. These are the
   few extras they need: a form inside the card, and the „forgot" line on login. */
.ce-card .form-group { text-align: left; margin-bottom: 16px; }
.ce-card .form-group label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.ce-card .form-group input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.ce-card .form-group input:focus-visible { outline: none; border-color: #1a3c8f; box-shadow: 0 0 0 3px rgba(26,60,143,0.12); }
.ce-card #rp-rules { font-size: 12px; color: #6b7280; margin: 6px 0 0; }
.ce-card #pu-error, .ce-card #rp-error { background: #fee2e2; color: #991b1b; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 12px 0; text-align: left; }
.ce-card #pu-error[hidden], .ce-card #rp-error[hidden] { display: none; }
.ce-card button.ce-btn { width: 100%; border: none; cursor: pointer; font: inherit; }
.ce-card button.ce-btn:disabled { opacity: 0.6; cursor: default; }