.bbc-checkin-box, .bbc-badge-stage, .bbc-badge-page-wrap {
    --bbc-bg: #f4f7fb;
    --bbc-surface: #ffffff;
    --bbc-border: #e2e8f0;
    --bbc-text: #0f172a;
    --bbc-muted: #64748b;
    --bbc-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
    color: var(--bbc-text);
}

.bbc-checkin-box {
    width: min(1280px, calc(100vw - 80px));
    max-width: none;
    margin: 28px auto;
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid var(--bbc-border);
    border-radius: 22px;
    box-shadow: var(--bbc-shadow);
    box-sizing: border-box;
}
.bbc-checkin-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.bbc-checkin-header h2, .bbc-checkin-box h3 { margin:0; }
.bbc-points-badge { background:#111827; color:#fff; border-radius:999px; padding:10px 14px; font-weight:800; }
.bbc-alert { padding:12px 14px; border-radius:14px; margin-bottom:16px; border:1px solid transparent; }
.bbc-alert-success { background:#effcf5; color:#047857; border-color:#c6f6d5; }
.bbc-alert-error { background:#fff4f4; color:#b42318; border-color:#fecaca; }
.bbc-alert-info { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.bbc-checkin-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:20px; align-items:start; }
.bbc-member-identity { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; margin-bottom:14px; }
.bbc-member-avatar { width:96px; height:96px; object-fit:cover; border-radius:22px; border:1px solid var(--bbc-border); background:#f8fafc; }
.bbc-member-head { display:grid; grid-template-columns:repeat(4, minmax(120px,1fr)); gap:10px; padding:14px; background:#f8fafc; border:1px solid var(--bbc-border); border-radius:16px; }
.bbc-member-head div { display:grid; gap:4px; min-width:0; }
.bbc-member-head span { color:var(--bbc-muted); font-size:12px; }
.bbc-profile-links { display:grid; gap:10px; margin-bottom:16px; color:var(--bbc-muted); }
.bbc-profile-links a { word-break:break-all; }
.bbc-form-row { display:grid; grid-template-columns:minmax(220px,300px) minmax(200px,1fr) 180px; gap:12px; align-items:end; }
.bbc-field { display:grid; gap:6px; }
.bbc-field label { font-weight:600; }
.bbc-field select, .bbc-field input[type="text"], .bbc-field textarea {
    width:100%; min-height:44px; padding:11px 14px; border-radius:14px; border:1px solid #d7dde6; box-sizing:border-box; background:#fff;
}
.bbc-field textarea { min-height:44px; max-height:110px; }
.bbc-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border:0; border-radius:14px; background:#111827; color:#fff; text-decoration:none; cursor:pointer; font-weight:700; }
.bbc-button-secondary { background:#fff; color:#111827; border:1px solid var(--bbc-border); }
.bbc-transaction-table-wrap { overflow:auto; margin-top:14px; border:1px solid var(--bbc-border); border-radius:16px; }
.bbc-transaction-table { width:100%; border-collapse:collapse; background:#fff; }
.bbc-transaction-table th, .bbc-transaction-table td { padding:12px; border-bottom:1px solid var(--bbc-border); text-align:left; white-space:nowrap; }
.bbc-transaction-table th { background:#f8fafc; color:#475569; font-size:12px; text-transform:uppercase; }
.bbc-transaction-table tr.bbc-type-credit { background:#effcf5; }
.bbc-transaction-table tr.bbc-type-debit { background:#fff4f4; }
.bbc-transaction-table tr.bbc-type-adjustment { background:#f2f7ff; }
.bbc-type-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 10px; font-size:11px; font-weight:800; text-transform:uppercase; }
.bbc-type-pill.bbc-type-credit { background:#d7f7e6; color:#047857; }
.bbc-type-pill.bbc-type-debit { background:#fde1e1; color:#b42318; }
.bbc-type-pill.bbc-type-adjustment { background:#dbeafe; color:#1d4ed8; }
.bbc-qr-card { border:1px solid var(--bbc-border); border-radius:20px; background:#fff; padding:18px; box-shadow:0 10px 24px rgba(15,23,42,.05); position:sticky; top:20px; }

.bbc-badge-stage { display:block; }
.bbc-badge-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border:1px solid var(--bbc-border);
    border-radius:24px;
    padding:22px;
    box-shadow: var(--bbc-shadow);
    overflow:hidden;
}
.bbc-badge-size-compact { max-width: 100%; }
.bbc-badge-size-print { max-width: 980px; margin: 0 auto; }
.bbc-badge-top, .bbc-badge-bottom { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.bbc-badge-brand { font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#334155; }
.bbc-badge-level-pill { display:inline-flex; padding:7px 12px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; background:#eef2ff; color:#4338ca; }
.bbc-badge-body { display:grid; grid-template-columns:150px minmax(0,1fr) 170px; gap:18px; align-items:center; margin:18px 0; }
.bbc-badge-photo-wrap { display:flex; justify-content:center; }
.bbc-badge-photo { width:140px; height:140px; object-fit:cover; border-radius:22px; border:1px solid var(--bbc-border); background:#f8fafc; }
.bbc-badge-title { color:var(--bbc-muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.bbc-badge-name { margin:6px 0 14px; font-size:30px; line-height:1.1; letter-spacing:-.03em; }
.bbc-badge-meta-grid { display:grid; grid-template-columns:repeat(2, minmax(160px, 1fr)); gap:12px; }
.bbc-badge-meta-grid div { display:grid; gap:4px; padding:12px 14px; background:#fff; border:1px solid var(--bbc-border); border-radius:16px; }
.bbc-badge-meta-grid span { color:var(--bbc-muted); font-size:12px; }
.bbc-badge-meta-grid strong { font-size:14px; word-break:break-word; }
.bbc-clip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bbc-badge-qr-wrap { text-align:center; }
.bbc-badge-qr { width:150px; max-width:100%; height:auto; border-radius:18px; padding:8px; border:1px solid var(--bbc-border); background:#fff; }
.bbc-badge-bottom { color:var(--bbc-muted); font-size:12px; padding-top:10px; border-top:1px solid var(--bbc-border); }
.bbc-badge-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.bbc-badge-page { background:#eef2f7; margin:0; }
.bbc-badge-page-wrap { max-width:1080px; margin:0 auto; padding:26px; }
.bbc-badge-toolbar { display:flex; justify-content:flex-end; gap:10px; margin-bottom:16px; }
.bbc-badge-hint { text-align:center; color:var(--bbc-muted); margin-top:14px; }

@media print {
    body.bbc-badge-page { background:#fff; }
    .no-print { display:none !important; }
    .bbc-badge-page-wrap { padding:0; max-width:none; }
    .bbc-badge-card { box-shadow:none; border:1px solid #cbd5e1; break-inside:avoid; }
}

@media (max-width: 1180px) {
    .bbc-checkin-layout { grid-template-columns:1fr; }
    .bbc-qr-card { position:static; }
    .bbc-member-head { grid-template-columns:repeat(2, minmax(140px,1fr)); }
    .bbc-form-row, .bbc-badge-body { grid-template-columns:1fr; }
    .bbc-badge-photo-wrap, .bbc-badge-qr-wrap { justify-content:flex-start; text-align:left; }
}

@media (max-width: 700px) {
    .bbc-checkin-box { width:calc(100vw - 24px); padding:16px; margin:12px auto; border-radius:18px; }
    .bbc-checkin-header { display:grid; grid-template-columns:1fr; }
    .bbc-member-identity { grid-template-columns:1fr; }
    .bbc-member-head { grid-template-columns:1fr; }
    .bbc-transaction-table th, .bbc-transaction-table td { padding:10px; }
    .bbc-badge-meta-grid { grid-template-columns:1fr; }
    .bbc-badge-page-wrap { padding:12px; }
}


.bbc-qr-card-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
}
.bbc-qr-only-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 2px;
}
.bbc-qr-only {
    width: min(100%, 250px);
    height: auto;
    display: block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--bbc-border);
    border-radius: 18px;
}
.bbc-qr-caption {
    margin: 0;
    color: var(--bbc-muted);
    font-size: 13px;
    text-align: center;
}
.bbc-sidebar-actions {
    margin-top: auto;
    display: grid;
    gap: 10px;
}
.bbc-sidebar-actions .bbc-button,
.bbc-sidebar-email-form .bbc-button {
    width: 100%;
}
.bbc-sidebar-email-form {
    margin: 0;
}