.suggestions-page{--sp-primary-color:#20b2aa;--sp-primary-dark:#1a8e88;--sp-primary-light:#4dc4bb;--sp-secondary-color:#dfb129;--sp-neutral-50:#fafafa;--sp-neutral-100:#f5f5f5;--sp-neutral-200:#e5e5e5;--sp-neutral-300:#d4d4d4;--sp-neutral-400:#a3a3a3;--sp-neutral-500:#737373;--sp-neutral-600:#525252;--sp-neutral-700:#404040;--sp-neutral-800:#262626;--sp-neutral-900:#171717;--sp-white:#fff;--sp-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--sp-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--sp-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--sp-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--sp-radius-sm:0.375rem;--sp-radius-md:0.5rem;--sp-radius-lg:0.75rem;--sp-radius-xl:1rem;max-width:1400px;margin:0 auto;padding:2rem 1rem;font-family:Inter,system-ui,-apple-system,sans-serif;position:relative}.suggestions-page .breadcrumb{margin-bottom:2rem}.suggestions-page .breadcrumb-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--sp-primary-color);text-decoration:none;font-weight:500;padding:.75rem 1.25rem;background:var(--sp-white);border-radius:var(--sp-radius-lg);box-shadow:var(--sp-shadow-sm);transition:all .3s ease;border:1px solid var(--sp-neutral-200)}.suggestions-page .breadcrumb-link:hover{background:var(--sp-primary-color);color:var(--sp-white);transform:translateY(-2px);box-shadow:var(--sp-shadow-md)}.suggestions-page .suggestions-header{text-align:center;margin-bottom:3rem;padding:3rem 2rem;background:linear-gradient(135deg,var(--sp-primary-color) 0,var(--sp-primary-light) 50%,var(--sp-secondary-color) 100%);border-radius:var(--sp-radius-xl);color:var(--sp-white);position:relative;overflow:hidden}.suggestions-page .suggestions-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.05"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.05"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none}.suggestions-page .suggestions-header h1{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2;position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.1)}.suggestions-page .suggestions-header p{font-size:1.25rem;margin-bottom:0;opacity:.95;position:relative;z-index:1;font-weight:400}.suggestions-page .filter-summary{background:var(--sp-white);border-radius:var(--sp-radius-xl);padding:2rem;margin-bottom:3rem;box-shadow:var(--sp-shadow-lg);border:1px solid var(--sp-neutral-200);text-align:center}.suggestions-page .filter-summary h2{font-size:1.5rem;font-weight:600;color:var(--sp-neutral-800);margin-bottom:1.5rem}.suggestions-page .filter-tags{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.suggestions-page .filter-tag{background:linear-gradient(135deg,var(--sp-primary-color) 0,var(--sp-primary-light) 100%);color:var(--sp-white);padding:.75rem 1.5rem;border-radius:var(--sp-radius-lg);font-size:.875rem;font-weight:600;box-shadow:var(--sp-shadow-sm);position:relative;overflow:hidden}.suggestions-page .filter-tag:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s}.suggestions-page .filter-tag:hover:before{left:100%}.suggestions-page .results-count{text-align:center;color:var(--sp-neutral-600);margin-bottom:3rem;font-size:1rem;font-weight:500;padding:1rem;background:var(--sp-white);border-radius:var(--sp-radius-lg);box-shadow:var(--sp-shadow-sm);border:1px solid var(--sp-neutral-200)}.suggestions-page .articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:2.5rem;margin-bottom:3rem}.suggestions-page .article-card{background:var(--sp-white);border-radius:var(--sp-radius-xl);box-shadow:var(--sp-shadow-md);overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid var(--sp-neutral-200);position:relative;height:fit-content;animation:sp-fadeInUp .6s ease forwards;opacity:0;transform:translateY(20px)}.suggestions-page .article-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--sp-shadow-xl);border-color:var(--sp-primary-light)}.suggestions-page .article-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--sp-primary-color),var(--sp-primary-light));opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0}.suggestions-page .article-card:hover:before{opacity:.02}.suggestions-page .article-card:first-child{animation-delay:.1s}.suggestions-page .article-card:nth-child(2){animation-delay:.2s}.suggestions-page .article-card:nth-child(3){animation-delay:.3s}.suggestions-page .article-card:nth-child(4){animation-delay:.4s}.suggestions-page .article-link{text-decoration:none;color:inherit;display:block;height:100%}.suggestions-page .article-image-container{position:relative;width:100%;height:240px;overflow:hidden}.suggestions-page .article-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.suggestions-page .article-card:hover .article-image{transform:scale(1.1)}.suggestions-page .article-image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.05) 30%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.2));opacity:0;transition:opacity .3s ease}.suggestions-page .article-card:hover .article-image-overlay{opacity:1}.suggestions-page .article-content{padding:2rem;position:relative}.suggestions-page .article-title{font-size:1.375rem;font-weight:700;color:var(--sp-neutral-900);margin-bottom:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}.suggestions-page .article-card:hover .article-title{color:var(--sp-primary-color)}.suggestions-page .article-excerpt{color:var(--sp-neutral-600);line-height:1.7;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.95rem}.suggestions-page .article-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--sp-neutral-200)}.suggestions-page .duration-badge{background:linear-gradient(135deg,var(--sp-secondary-color) 0,#f4c842 100%);color:var(--sp-white);padding:.5rem 1rem;border-radius:var(--sp-radius-lg);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--sp-shadow-sm)}.suggestions-page .read-more-btn{color:var(--sp-primary-color);font-weight:600;font-size:.875rem;padding:.5rem 1rem;border-radius:var(--sp-radius-md);transition:all .3s ease;border:2px solid transparent}.suggestions-page .article-card:hover .read-more-btn{background:var(--sp-primary-color);color:var(--sp-white);border-color:var(--sp-primary-color)}.suggestions-page .no-suggestions{text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,var(--sp-white) 0,var(--sp-neutral-50) 100%);border-radius:var(--sp-radius-xl);border:2px dashed var(--sp-neutral-300);margin:3rem 0}.suggestions-page .no-suggestions-icon{margin-bottom:2rem;color:var(--sp-primary-color);opacity:.6}.suggestions-page .no-suggestions h2{font-size:2rem;color:var(--sp-neutral-700);margin-bottom:1rem;font-weight:600}.suggestions-page .no-suggestions p{color:var(--sp-neutral-600);margin-bottom:2.5rem;font-size:1.125rem;line-height:1.6}.suggestions-page .fallback-actions{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.suggestions-page .action-button{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;border-radius:var(--sp-radius-lg);text-decoration:none;font-weight:600;transition:all .3s ease;font-size:.95rem;position:relative;overflow:hidden}.suggestions-page .action-button.primary{background:linear-gradient(135deg,var(--sp-primary-color) 0,var(--sp-primary-light) 100%);color:var(--sp-white);box-shadow:var(--sp-shadow-md)}.suggestions-page .action-button.primary:hover{background:linear-gradient(135deg,var(--sp-primary-dark) 0,var(--sp-primary-color) 100%);transform:translateY(-2px);box-shadow:var(--sp-shadow-lg)}.suggestions-page .action-button.secondary{background:var(--sp-white);color:var(--sp-primary-color);border:2px solid var(--sp-primary-color);box-shadow:var(--sp-shadow-sm)}.suggestions-page .action-button.secondary:hover{background:var(--sp-primary-color);color:var(--sp-white);transform:translateY(-2px);box-shadow:var(--sp-shadow-md)}.suggestions-page .loading-spinner{width:3rem;height:3rem;border-top:3px solid var(--sp-neutral-200);border:3px solid var(--sp-neutral-200);border-top-color:var(--sp-primary-color);border-radius:50%;animation:sp-spin 1s linear infinite;margin:0 auto 1rem}@keyframes sp-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes sp-fadeInUp{to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.suggestions-page{padding:1.5rem}.suggestions-page .articles-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem}}@media (max-width:768px){.suggestions-page{padding:1rem}.suggestions-page .suggestions-header{padding:2rem 1rem}.suggestions-page .suggestions-header h1{font-size:2.25rem}.suggestions-page .articles-grid{grid-template-columns:1fr;gap:1.5rem}.suggestions-page .filter-summary{padding:1.5rem}.suggestions-page .fallback-actions,.suggestions-page .filter-tags{flex-direction:column;align-items:center}.suggestions-page .action-button{width:100%;max-width:300px;justify-content:center}}@media (max-width:480px){.suggestions-page .suggestions-header h1{font-size:1.875rem}.suggestions-page .suggestions-header p{font-size:1rem}.suggestions-page .article-content{padding:1.5rem}.suggestions-page .article-footer{flex-direction:column;align-items:flex-start;gap:1rem}.suggestions-page .filter-summary{padding:1rem}.suggestions-page .filter-summary h2{font-size:1.25rem}}