:root {
  color-scheme: light dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background: #101827;
  color: #e8eef7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 4rem 1rem;
  background: radial-gradient(circle at top, #193253, #101827 55%);
}

.card {
  width: min(960px, 100%);
  background: rgba(14, 25, 42, 0.94);
  border: 1px solid #324963;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.eyebrow { color: #76b9ff; font-weight: 700; margin: 0; }
h1 { margin: 0.35rem 0; }
.muted, .status { color: #a9bad0; }

label { display: block; margin: 1.5rem 0 0.5rem; font-weight: 650; }
.unlock-row { display: flex; gap: 0.65rem; }
input, button { font: inherit; border-radius: 9px; padding: 0.8rem 1rem; }
input { flex: 1; min-width: 0; border: 1px solid #536b87; background: #0c1523; color: inherit; }
button { border: 0; background: #1580d8; color: white; font-weight: 700; cursor: pointer; }
button:hover { background: #2793e9; }

iframe {
  width: 100%;
  min-height: 72vh;
  margin-top: 1.25rem;
  border: 1px solid #405672;
  border-radius: 12px;
  background: white;
}

@media (max-width: 560px) {
  body { padding: 1rem 0.6rem; }
  .unlock-row { flex-direction: column; }
}