.wrap{padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 24px);max-width:960px;margin:0 auto}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:env(safe-area-inset-top) 16px 12px;background:linear-gradient(180deg,#0b1220,#0b1220cc 60%,transparent);backdrop-filter:blur(6px);z-index:20}
.brand{font-weight:700;letter-spacing:.3px}
.card{background:linear-gradient(180deg,#0f172a,#0b1220);border:1px solid #1f2937;border-radius:var(--radius);padding:16px 16px 20px;box-shadow:0 6px 24px #0007}
.card h1{margin:0 0 .5rem;font-size:1.25rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tip{margin-top:8px;background:#0b1324;border:1px dashed #1e293b;border-radius:12px;padding:8px 12px}

/* Forms */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.full{grid-column:1/-1}
.authswitch{display:flex;gap:16px;margin:8px 0}
.output{margin-top:16px;border:1px solid #1e293b;border-radius:12px;background:#0b1320}
.output-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #1e293b;color:#cbd5e1}
.scroll{max-height:50vh;overflow:auto;padding:12px}
pre{white-space:pre-wrap;word-break:break-word;margin:0}

/* Wider screens */
@media (min-width:640px){
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .full{grid-column:1/3}
}