.bk-vcard {
  --vcard-ink: #17243a;
  --vcard-muted: #68788f;
  --vcard-line: #dfe7f1;
  --vcard-soft: #f5f8fc;
  --vcard-blue: #1769e0;
  --vcard-blue-dark: #1056bf;
  color: var(--vcard-ink);
  padding: 8px 0 56px;
}
.bk-vcard, .bk-vcard * { box-sizing: border-box; }
.bk-vcard [hidden] { display: none !important; }
.bk-vcard button, .bk-vcard input { font-family: inherit; }
.bk-vcard-back { display: inline-flex; align-items: center; margin: 0 0 18px; padding: 9px 14px; border: 1px solid var(--vcard-line); border-radius: 999px; color: var(--vcard-ink); background: #fff; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; }
.bk-vcard-back:hover { border-color: var(--vcard-blue); color: var(--vcard-blue); }
.bk-vcard-hero { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.bk-vcard-hero__eyebrow { display: inline-block; margin-bottom: 12px; color: var(--vcard-blue); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.bk-vcard-hero h1 { margin: 0; color: var(--vcard-ink); font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; }
.bk-vcard-hero p { margin: 14px auto 0; color: var(--vcard-muted); font-size: 16px; line-height: 1.65; }
.bk-vcard-form, .bk-vcard-help { border: 1px solid var(--vcard-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(31, 54, 88, .08); padding: 22px; }
.bk-vcard-help { margin-top: 16px; }
.bk-vcard-help h2 { margin: 0 0 10px; color: var(--vcard-ink); font-size: 22px; letter-spacing: -.02em; }
.bk-vcard-help ol { margin: 0; padding-left: 18px; color: #34455e; font-size: 15px; line-height: 1.6; }
.bk-vcard-help li + li { margin-top: 8px; }
.bk-vcard-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 22px; align-items: start; }
.bk-vcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-vcard-grid label:nth-child(n + 6) { grid-column: 1 / -1; }
.bk-vcard label { display: block; color: #34455e; font-size: 13px; font-weight: 700; }
.bk-vcard input { display: block; width: 100%; min-height: 46px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--vcard-line); border-radius: 12px; color: var(--vcard-ink); background: var(--vcard-soft); font-size: 15px; outline: none; }
.bk-vcard input:focus { border-color: var(--vcard-blue); background: #fff; box-shadow: 0 0 0 4px rgba(23, 105, 224, .12); }
.bk-vcard-form button, .bk-vcard-downloads button { min-height: 46px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 12px; color: #fff; background: var(--vcard-blue); cursor: pointer; font-size: 15px; font-weight: 750; }
.bk-vcard-form button:hover, .bk-vcard-downloads button:hover { background: var(--vcard-blue-dark); }
.bk-vcard-quiet { color: var(--vcard-blue) !important; background: #e8f1ff !important; }
.bk-vcard-quiet:hover { color: #fff !important; background: var(--vcard-blue) !important; }
.bk-vcard-error { margin: 12px 0 0; padding: 14px 16px; border-radius: 14px; color: #8d2b2b; background: #fff1f1; font-size: 14px; line-height: 1.5; }
.bk-vcard-preview { display: flex; flex-direction: column; align-items: center; }
.bk-vcard-qr { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 300px; padding: 16px; border: 1px dashed var(--vcard-line); border-radius: 16px; background: var(--vcard-soft); }
.bk-vcard-qr p { margin: 0; color: var(--vcard-muted); text-align: center; }
.bk-vcard-qr canvas { display: block; width: min(100%, 320px); height: auto; background: #fff; border-radius: 8px; }
.bk-vcard-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 800px) {
  .bk-vcard-layout, .bk-vcard-grid { grid-template-columns: 1fr; }
  .bk-vcard-grid label:nth-child(n + 6) { grid-column: auto; }
  .bk-vcard-form button, .bk-vcard-downloads button { width: 100%; }
}