/* Recovery-Bonus („Sparschwein“) – Karte im Premium-Bereich */
.nc-rb { --rb-accent: #c40d86; --rb-muted: #6b6889; --rb-soft: rgba(196, 13, 134, .07); --rb-line: rgba(107, 104, 137, .22); }
.nc-dark .nc-rb { --rb-accent: #f27ac8; --rb-muted: #b9b6d3; --rb-soft: rgba(242, 122, 200, .10); --rb-line: rgba(185, 182, 211, .22); }

.nc-rb-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.nc-rb-pig { font-size: 2rem; line-height: 1; }
.nc-rb-title { font-weight: 700; font-size: 15px; }
.nc-rb-sub, .nc-rb-note { color: var(--rb-muted); font-size: 13px; }
.nc-rb-text { font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.nc-rb-note { margin: 8px 0 12px; line-height: 1.5; }

.nc-rb-count { text-align: center; padding: 14px 8px 6px; border-radius: 12px; background: var(--rb-soft); }
.nc-rb-num { font-size: 2.6rem; font-weight: 800; color: var(--rb-accent); line-height: 1.1; }
.nc-rb-num-label { font-size: 13px; color: var(--rb-muted); }
.nc-rb-progress { height: 10px; border-radius: 99px; background: var(--rb-line); overflow: hidden; margin: 12px 0 6px; }
.nc-rb-progress span { display: block; height: 100%; background: var(--rb-accent); border-radius: 99px; transition: width .6s ease; }
.nc-rb-next { font-size: 13px; text-align: center; }
.nc-rb-pause { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--rb-line); font-size: 13px; line-height: 1.5; }
.nc-rb-earned { font-weight: 600; font-size: 14px; margin: 12px 0 0; }

.nc-rb-ms { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.nc-rb-ms li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.nc-rb-ms-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rb-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.nc-rb-ms li.is-done .nc-rb-ms-dot { background: var(--rb-accent); border-color: var(--rb-accent); color: #fff; }
.nc-rb-ms-bonus { color: var(--rb-muted); white-space: nowrap; }

.nc-rb-ledger { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rb-line); }
.nc-rb-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--rb-line); font-size: 13px; }
.nc-rb-ledger li span:last-child { grid-column: 1 / -1; color: var(--rb-muted); font-size: 12px; }

.nc-rb-invite { padding: 12px; border-radius: 10px; background: var(--rb-soft); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.nc-rb-code { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nc-rb-code code { font-size: 14px; letter-spacing: .05em; }

.nc-rb-rules { margin: 4px 0 12px; font-size: 13px; }
.nc-rb-rules summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.nc-rb-rules ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }
.nc-rb-rules li { margin-bottom: 6px; }

.nc-rb-accept { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0 12px; }
.nc-rb-accept input { margin-top: 3px; }
.nc-rb-join { width: 100%; justify-content: center; font-weight: 700; padding: 12px; background: var(--rb-accent); color: #fff; }
.nc-rb-join:disabled { opacity: .5; cursor: not-allowed; }
.nc-rb-leave { background: none; border: 0; padding: 4px 0; color: var(--rb-muted); text-decoration: underline; font-size: 12px; cursor: pointer; }
.nc-rb-msg { font-size: 13px; margin-top: 8px; color: var(--rb-accent); }
.nc-rb .nc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .nc-rb-progress span { transition: none; } }

/* Kompakte Karte unter den Clean-Timern */
.nc-rb-mini { margin: 16px 0; }
.nc-rb-mini-row { display: flex; gap: 12px; align-items: center; }
.nc-rb-mini .nc-rb-pig { font-size: 1.6rem; }
.nc-rb-mini-main { flex: 1 1 auto; min-width: 0; }
.nc-rb-mini-link { flex: 0 0 auto; text-decoration: none; }
.nc-rb-mini .nc-rb-progress { margin: 10px 0 0; height: 8px; }
.nc-rb-mini .nc-rb-pause { margin-top: 10px; }
@media (max-width: 420px) {
  .nc-rb-mini-row { flex-wrap: wrap; }
  .nc-rb-mini-link { width: 100%; justify-content: center; text-align: center; }
}