/* ✅ Global mobile-safe sizing */
*, *::before, *::after {
  box-sizing: border-box;
}
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background:#0b1220; color:#eef2ff; }
html, body {
  overflow-x: hidden;
}
header {
  display: flex;
  justify-content: center;   /* ✅ center horizontally */
  align-items: center;
  padding: 16px;
  background: #0f1a33;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header img { height:56px; max-width: 80%;
 }
header h1 { font-size:18px; margin:0; }
main { max-width:900px; margin:0 auto; padding:16px; }
.card { background:#111c36; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; margin-bottom:16px; }
label { display:block; font-size:12px; opacity:.85; margin:10px 0 6px; }
input {
  width:100%;
  max-width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:#0b1220;
  color:#fff;
}
button { width:100%; margin-top:12px; padding:12px; border-radius:10px; border:0; background:#3b82f6; color:#fff; font-weight:700; }
button:active { transform: scale(.99); }
.hint { opacity:.7; font-size:12px; }
.row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.checkbox { display:flex; gap:10px; align-items:center; margin-top:12px; }
.checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.status { margin-top:12px; padding:12px; border-radius:10px; background:rgba(255,255,255,.06); }
.hidden { display:none; }
.next { margin-top:12px; padding:16px; border-radius:12px; background:#22c55e; color:#052e12; font-weight:900; text-align:center; }

/* ✅ Attendee join confirmation */
.status.success {
  background: rgba(34, 197, 94, 0.15); /* green tint */
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
  font-weight: 600;
}

/* ✅ Mobile layout fixes */
@media (max-width: 640px) {
  main {
    padding:12px;
  }

  .row {
    grid-template-columns: 1fr;
  }
}