/* Piloto controlado (Fase 12): cartoes, indicadores e feedback. Reaproveita .ob-* (onboarding.css), .badge, .cp-tabs e .cm-modal. */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pl-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pl-card h4 { margin: 6px 0 0; }
.pl-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; padding: 0; font-size: 13px; }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.pl-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.pl-tile span { font-size: 12px; color: var(--color-muted); }
.pl-tile strong { font-size: 18px; overflow-wrap: anywhere; }
.pl-bad { border-color: #f0c2bb; background: #fdf3f1; color: #7a1f14; }
.pl-bad strong { color: #b3261e; }
.pl-hint { color: var(--color-accent, #0e7c86); font-size: 12px; }
.ob-top .cp-tabs { margin: 0; }
@media (max-width: 700px) {
  .pl-tiles { grid-template-columns: 1fr 1fr; }
  .pl-grid { grid-template-columns: 1fr; }
}