body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 22px; background: var(--surface); color: var(--ink); }
.rq-pad { padding: var(--space-4); }
.rq-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.rq-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.rq-serif { font-family: var(--font-serif); }
.rq-muted { color: var(--ink-muted); }
.rq-h3 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 26px; margin: 0; color: var(--ink); }

/* Rafiq-signaal */
.rq-signal { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--rafiq-signal); }

/* Beeldmerk wisselt per thema */
.rq-mark-on-dark { display: none; }
[data-theme="dark"] .rq-mark-on-light { display: none; }
[data-theme="dark"] .rq-mark-on-dark { display: inline-block; }

/* Lockup */
.rq-lockup { display: flex; align-items: center; gap: var(--space-3); }
.rq-lockup img { width: 48px; height: 48px; }
.rq-wordmark { font-family: var(--font-serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.rq-endorse { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: 6px; }
.rq-lockup-sm img { width: 24px; height: 24px; }
.rq-lockup-sm .rq-wordmark { font-size: 20px; }

/* Knoppen */
.rq-btn { font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.rq-btn-primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.rq-btn-quiet { background: transparent; border-color: transparent; color: var(--ink-muted); }
.rq-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rq-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Zekerheidslabel */
.rq-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.rq-badge::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }
.rq-badge-good { background: var(--status-good-soft); color: var(--status-good); }
.rq-badge-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.rq-badge-critical { background: var(--status-critical-soft); color: var(--status-critical); }

/* Kaart */
.rq-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); }
.rq-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rq-card-head .rq-badge { margin-left: auto; }
.rq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.rq-fields dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rq-fields dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.rq-why { display: flex; gap: var(--space-2); align-items: baseline; background: var(--rafiq-soft); color: var(--ink); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 20px; margin-bottom: var(--space-3); }
.rq-why b { color: var(--rafiq-ink); font-weight: 600; }

/* Bericht */
.rq-msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.rq-msg img { width: 36px; height: 36px; border-radius: var(--radius-full); flex: none; }
.rq-bubble { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); padding: var(--space-3) var(--space-4); max-width: 460px; }
.rq-bubble p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 22px; }
.rq-bubble p:last-child { margin-bottom: 0; }
.rq-from { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-bottom: var(--space-2); }
.rq-from b { color: var(--ink); font-weight: 600; }
.rq-sign { font-size: 13px; color: var(--ink-muted); }

/* Maandoverzicht */
.rq-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.rq-figure { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); }
.rq-figure span { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rq-figure strong { display: block; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.rq-figure-key { background: var(--surface-inverse); border-color: var(--surface-inverse); }
.rq-figure-key span, .rq-figure-key strong { color: var(--on-inverse); }

/* AI-melding */
.rq-notice { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--rafiq-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.rq-notice .rq-signal { margin-top: 6px; }
.rq-notice b { display: block; color: var(--rafiq-ink); font-weight: 600; font-size: 13px; line-height: 20px; }
.rq-notice p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink); }

/* Kopbalk: altijd wit vanwege het Amanah-logo */
.rq-header { display: flex; align-items: center; gap: var(--space-4); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.rq-header-logo { height: 40px; width: auto; display: block; }
.rq-header-rule { width: 1px; align-self: stretch; background: #DDE1D6; }
.rq-header .rq-wordmark { color: #16233F; }
.rq-header .rq-mark-on-dark { display: none !important; }
.rq-header-meta { margin-left: auto; font-size: 12px; line-height: 16px; color: #4B5468; }