.bpjs-preview { display: grid; gap: 12px; }
.bpjs-banner { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #d4e2f7; border-radius: 9px; color: var(--ink-600); background: #f7faff; font-size: 10px; }
.bpjs-banner__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; color: var(--clinova-blue); background: var(--clinova-blue-soft); }
.bpjs-banner strong { display: block; color: var(--ink-800); }
.bpjs-banner span:last-child { display: block; margin-top: 2px; }
.bpjs-card { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.bpjs-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bpjs-card__title { color: var(--ink-900); font-size: 13px; font-weight: 820; }
.bpjs-card__subtitle { margin-top: 4px; color: var(--ink-500); font-size: 9px; }
.bpjs-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bpjs-field { padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.bpjs-field span { display: block; color: var(--ink-500); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.bpjs-field strong { display: block; margin-top: 4px; color: var(--ink-800); font-size: 10px; line-height: 1.3; }
.bpjs-rule-list { display: grid; gap: 7px; }
.bpjs-rule { display: flex; align-items: flex-start; gap: 7px; padding: 8px; border-radius: 7px; color: var(--ink-600); background: var(--surface-muted); font-size: 9px; }
.bpjs-rule--pass { color: var(--clinova-green); background: var(--clinova-green-soft); }
.bpjs-rule--warn { color: var(--clinova-amber); background: var(--clinova-amber-soft); }
.bpjs-rule--block { color: var(--clinova-red); background: var(--clinova-red-soft); }
.bpjs-rule strong,
.bpjs-rule small { display: block; }
.bpjs-rule strong { color: var(--ink-800); font-size: 10px; }
.bpjs-rule small { margin-top: 2px; color: var(--ink-600); }
.bpjs-callout { padding: 11px 12px; border: 1px solid #f0cbd0; border-radius: 8px; color: var(--ink-600); background: #fff7f8; font-size: 10px; line-height: 1.4; }
.bpjs-callout strong { color: var(--clinova-red); }
@media (max-width: 780px) { .bpjs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bpjs-fields { grid-template-columns: minmax(0, 1fr); } }