.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.security-grid > form,
.security-card {
  padding: 26px;
  background: linear-gradient(150deg, #10283a, #091621);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.security-grid form,
.security-card { display: grid; gap: 14px; }
.security-card button { width: 100%; }
.security-card small { color: var(--muted); }
.setup-box {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid #2f637b;
  border-radius: 14px;
  background: #06131d;
}
.setup-box input[readonly] {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--cyan);
}
.credential-qr { width: min(320px,100%); height: auto; display: block; margin: 16px auto; padding: 10px; border-radius: 16px; background: #fff; }
.credential-qr-panel { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #02070ccc; backdrop-filter: blur(8px); }
.credential-qr-panel > * { max-width: 390px; }
.credential-qr-panel p, .credential-qr-panel button { margin: 0; }
.credential-qr-panel:before { content: ""; position: absolute; inset: 0; z-index: -1; }
.credential-qr-panel { color: var(--text); }
.credential-qr-panel p { padding: 18px 22px 0; border-radius: 20px 20px 0 0; background: linear-gradient(150deg,#10283a,#091621); }
.credential-qr-panel img { margin: 0; padding: 22px; border-radius: 0; background: linear-gradient(150deg,#10283a,#091621); }
.credential-qr-panel button { width: 100%; border-radius: 0 0 20px 20px; }
@media (max-width: 850px) { .security-grid { grid-template-columns: 1fr; } }