/* Minimal, clean, mobile-friendly */
.msrb { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 16px; background: #fff; }
.msrb-header { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.msrb-header h2 { margin:0; font-size: 20px; line-height: 1.2; }
.msrb-actions { display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.msrb-btn { appearance:none; border: 0; background: #111; color: #fff; padding: 10px 14px; border-radius: 999px; cursor:pointer; font-weight: 600; }
.msrb-btn.is-loading { opacity:.7; cursor:progress; }
.msrb-link { color:#111; text-decoration: underline; font-weight: 600; }

.msrb-card { margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.03); }
.msrb-card__title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.msrb-card__meta { font-size: 12px; opacity: .7; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.msrb-card__prompt { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.msrb-card__audio { margin-top: 10px; }
.msrb-card__audio audio { width: 100%; }
.msrb-card__qr { margin-top: 12px; display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.msrb-qr { width:128px; height:128px; background:#fff; padding:8px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; }
.msrb-qr img, .msrb-qr canvas { max-width: 100%; max-height: 100%; }
.msrb-qr__label { font-size: 12px; opacity:.7; }
.msrb-card__open { margin-top: 10px; }

.msrb-flow-grid { margin-top: 14px; display:grid; grid-template-columns: 1fr; gap: 12px; }
.msrb-flow-col h3 { margin: 0 0 8px 0; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; opacity:.7; }
.msrb-card--small .msrb-qr { width: 96px; height: 96px; }
.msrb-hint { margin: 10px 0 0; font-size: 13px; opacity:.75; }

.msrb-audio-page .msrb-audio { max-width: 720px; margin: 0 auto; padding: 22px; }
.msrb-audio-page h1 { font-size: 24px; margin: 0 0 14px; }
.msrb-audio-page audio { width: 100%; margin-bottom: 14px; }
.msrb-audio__prompt { font-size: 16px; line-height: 1.6; }

.msrb-print-page { background:#fff; }
.msrb-print-actions { position: sticky; top: 0; background: #fff; padding: 10px; border-bottom: 1px solid rgba(0,0,0,.08); display:flex; gap:10px; }
.msrb-print { padding: 14px; }
.msrb-print h1 { margin: 0 0 12px; font-size: 18px; }
.msrb-print-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.msrb-print-card { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 10px; break-inside: avoid; }
.msrb-print-card__title { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.msrb-print-card__meta { font-size: 10px; opacity:.7; text-transform: uppercase; }
.msrb-print-card__prompt { margin-top: 8px; font-size: 12px; line-height: 1.4; white-space: pre-wrap; min-height: 44px; }
.msrb-print-card__qr { margin-top: 8px; }
.msrb-print-card__url { margin-top: 6px; font-size: 9px; opacity:.6; word-break: break-all; }

@media (min-width: 860px) {
  .msrb-flow-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media print {
  .msrb-print-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
}