.test-environment { margin: 0 auto 16px; max-width: 1120px; padding: 10px 16px; color: #536e55; background: #edf3e4; border: 1px solid #dce5d0; border-radius: 12px; font-size: 12px; }
.recommendations { padding-top: 26px; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.recommendation-group { border: 1px solid #e2e8d9; border-radius: 18px; padding: 16px; background: #fffef9; }
.recommendation-group h3 { margin: 0 0 12px; font-size: 15px; }
.recommendation-group ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recommendation-group a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 13px; }
.recommendation-group a:hover { background: #edf3e4; }
.recommendation-group img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.recommendation-empty { color: #7a8d7b; font-size: 13px; }
.recommendation-count { color: #7a8d7b; font-size: 12px; margin-left: 8px; }
.recommendation-group a:focus-visible { outline: 2px solid #416d52; outline-offset: 2px; }
@media (max-width: 620px) { .recommendation-grid { grid-template-columns: 1fr; gap: 10px; }.recommendation-group { padding: 14px; } }