.roles-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(280px,1fr));gap: 16px;margin: 24px 0;}.role-card{background: var(--color-card-background);border: 1px solid var(--color-border);border-radius: 12px;padding: 20px;border-top: 4px solid var(--color-text-muted);}.role-card.role-landlord{border-top-color: var(--color-success);}.role-card.role-landlord-agent{border-top-color: var(--color-primary);}.role-card.role-tenant{border-top-color: var(--color-warning);}.role-card.role-tenant-agent{border-top-color: var(--color-warning);}.role-card.role-maintenance{border-top-color: var(--color-text-muted);}.role-card h3{font-size: var(--font-size-base,16px);font-weight: var(--font-weight-semibold,600);color: var(--color-secondary);margin: 0 0 4px 0;}.role-code{display: inline-block;font-family: monospace;font-size: var(--font-size-xxs,11px);background: var(--color-background);padding: var(--spacing-xs) var(--spacing-sm);border-radius: 4px;color: var(--color-text-secondary);margin-bottom: var(--spacing-sm);}.role-card p{font-size: var(--font-size-sm,14px);color: var(--color-text-muted);margin: 0 0 12px 0;line-height: 1.5;}.role-permissions{margin: 0;padding: 0;list-style: none;font-size: var(--font-size-xs,12px);}.role-permissions li{margin: 4px 0;padding-left: 20px;position: relative;}.role-permissions li.yes::before{content: "✓";position: absolute;left: 0;color: var(--color-success);font-weight: var(--font-weight-bold,700);}.role-permissions li.no::before{content: "✗";position: absolute;left: 0;color: var(--color-error);}.feature-list{padding-left: 20px;line-height: 1.8;}.feature-list li{margin: var(--spacing-sm) 0;}.code-block{background: var(--color-background);border: 1px solid var(--color-border-light);border-radius: var(--border-radius-sm);padding: 16px;font-family: monospace;font-size: var(--font-size-xs,12px);overflow-x: auto;white-space: pre;margin: 16px 0;}@media (max-width: 575px){.roles-grid{grid-template-columns: 1fr;}.data-groups-grid{grid-template-columns: 1fr;}}.data-groups-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(220px,1fr));gap: 12px;margin: 16px 0;}.data-group-card{background: var(--color-card-background);border: 1px solid var(--color-border);border-radius: 10px;padding: 16px;display: flex;flex-direction: column;gap: var(--spacing-sm);}.data-group-card .group-icon{font-size: var(--font-size-3xl,24px);}.data-group-card strong{font-family: monospace;font-size: var(--font-size-xs,12px);color: var(--color-primary);}.data-group-card p{font-size: var(--font-size-xs,12px);color: var(--color-text-muted);margin: 0;line-height: 1.4;}.data-table{width: 100%;border-collapse: collapse;margin: 16px 0;font-size: var(--font-size-sm,14px);}.data-table th,.data-table td{padding: 10px 12px;text-align: left;border-bottom: 1px solid var(--color-border);}.data-table th{background: var(--color-background);font-weight: var(--font-weight-semibold,600);color: var(--color-secondary);}.data-table td code{background: var(--color-background);padding: var(--spacing-xs) var(--spacing-sm);border-radius: 4px;font-size: var(--font-size-xs,12px);}