.beta-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 13px;
}

.beta-banner span { color: #d8e8e4; }
.optional { display: inline; color: var(--muted); font-weight: 500; }
.beta-details { padding-top: 12px; }
.beta-details .card p { margin-bottom: 0; color: var(--muted); }
.beta-details h3 { margin-top: 0; }
.join-card { display:flex; justify-content:space-between; align-items:center; gap:28px; }
.join-card .beta-actions { align-items:flex-start; }
.loading-state,.error-state { min-height:280px; display:grid; place-content:center; text-align:center; }
.spinner { width:36px; height:36px; border:4px solid #d8e8e4; border-top-color:var(--ink); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
.observation-wrap { margin-top:16px; padding:14px; background:#f5f8f7; border-radius:12px; }
.observation-wrap label { margin-bottom:8px; }
.guidance-feedback { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.guidance-feedback button { border:1px solid #b8c9c5; background:#fff; border-radius:999px; padding:8px 12px; }
.caution { border-left:3px solid #c89b47; padding-left:14px; }
.success-page { min-height:calc(100vh - 80px); display:grid; place-items:center; padding:40px 20px; }
.success-card { width:min(720px,100%); }
.success-card h1 { margin-top:8px; }
.onboarding-box { margin:24px 0; padding:20px; border-radius:14px; background:#f5f8f7; }
.onboarding-box h2 { margin-top:0; font-size:1.25rem; }
.onboarding-box li + li { margin-top:10px; }
.paid-welcome { margin-bottom:28px; border:2px solid var(--ink); background:#f3f8f6; }
.paid-welcome h2 { margin:6px 0 8px; }
.learner-manager { padding:14px; margin-bottom:8px; border-radius:12px; background:#f5f8f7; }
.learner-manager .button { width:100%; margin-top:10px; }
.demo-notice { margin:-4px 0 18px; padding:12px 14px; border-radius:10px; background:#fff5dc; color:#60470d; }
.status strong { color:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 700px) {
  .beta-banner { gap: 3px; }
  .beta-banner strong, .beta-banner span { width: 100%; }
  .join-card { display:block; }
  .join-card .beta-actions { margin-top:20px; }
}