.shopping-security-backdrop {
  position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center;
  padding: 20px; background: rgba(3, 15, 25, .72); backdrop-filter: blur(7px);
}
.shopping-security-dialog {
  width: min(100%, 390px); box-sizing: border-box; border: 1px solid #b9dce9;
  border-radius: 18px; background: #fff; color: #112b3e; padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 20, 35, .34); font-family: inherit;
}
.shopping-security-dialog h2 { margin: 0 0 8px; font-size: 21px; }
.shopping-security-dialog p { margin: 0 0 18px; color: #5a7183; line-height: 1.5; }
.shopping-security-dialog label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.shopping-security-dialog input {
  width: 100%; box-sizing: border-box; border: 1px solid #bcd2df; border-radius: 10px;
  background: #f8fcfe; color: #112b3e; padding: 12px 13px; font: 600 16px/1 inherit;
}
.shopping-security-dialog input[data-kind="code"] { text-align: center; letter-spacing: .35em; font-size: 22px; }
.shopping-security-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 18px; }
.shopping-security-actions button { min-height: 42px; border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.shopping-security-cancel { background: #eaf4f8; color: #244459; }
.shopping-security-submit { background: #0799ca; color: #fff; }
@media (prefers-color-scheme: dark) {
  .shopping-security-dialog { border-color: #355064; background: #14232e; color: #f3f9fc; }
  .shopping-security-dialog p { color: #b7cad6; }
  .shopping-security-dialog input { border-color: #476277; background: #0c1922; color: #fff; }
  .shopping-security-cancel { background: #263c4b; color: #e9f6fc; }
}