/* Force light rendering for this section only (prevents auto-darkening) */
:root { color-scheme: light; }

/* Layout */
.uc-wrap {
  min-height: 60dvh;                 /* full viewport height */
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f7f7f8;                /* light neutral backdrop */
}

.uc-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  color: #111;
  border: 1px solid #e6e6ea;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.06);
}

/* Typography */
.uc-card h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: 0.2px;
}

.uc-card p {
  margin: 0 auto;
  max-width: 48ch;
  font-size: clamp(14px, 2.5vw, 16px);
  color: #444;
}

/* Tag */
.uc-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f3f5;
  border: 1px solid #e6e6ea;
  font-size: 2rem;
  letter-spacing: .2px;
  color: #333;
}

/* Nice hover lift (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .uc-card { transition: transform .3s ease; }
  .uc-card:hover { transform: translateY(-2px); }
}

/* Safety net if device forces dark mode */
@media (prefers-color-scheme: dark) {
  .uc-wrap { background: #f7f7f8 !important; }
  .uc-card { background: #fff !important; color: #111 !important; }
}