* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #f9fafb;
}
.app { max-width: 760px; margin: 0 auto; padding: 22px; }
.hero { padding: 18px 0 12px; }
.badge { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #c7d2fe; font-size: 13px; }
h1 { margin: 14px 0 8px; font-size: 34px; line-height: 1.05; }
p { color: #cbd5e1; line-height: 1.55; }
.card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.card + .card { margin-top: 16px; }
.card.small { padding: 14px; }
h2 { margin: 0 0 10px; font-size: 16px; }
label { display: block; margin: 14px 0 7px; color: #e5e7eb; font-size: 14px; }
input, textarea { width: 100%; border: 1px solid rgba(255,255,255,.14); background: rgba(15,23,42,.9); color: #fff; border-radius: 14px; padding: 12px 13px; font: inherit; outline: none; }
textarea { resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; }
.check input { width: auto; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
button { border: 0; border-radius: 14px; padding: 12px 14px; font-weight: 800; cursor: pointer; background: #f9fafb; color: #111827; }
button.secondary { background: #334155; color: #fff; }
button.ghost { background: transparent; color: #dbeafe; border: 1px solid rgba(219,234,254,.25); }
button:disabled { opacity: .55; cursor: not-allowed; }
.status { margin-top: 14px; padding: 12px; border-radius: 14px; background: rgba(15,23,42,.8); color: #cbd5e1; }
.status.active { background: rgba(22, 163, 74, .18); color: #bbf7d0; }
.status.error { background: rgba(220, 38, 38, .18); color: #fecaca; }
.debug { max-height: 260px; overflow: auto; white-space: pre-wrap; color: #cbd5e1; font-size: 12px; line-height: 1.45; }