.tutorial-list-page{background:linear-gradient(#fafbfc 0%,#f1f5f9 100%);min-height:60vh}.tutorial-list-header{padding:72px 0 48px;position:relative;overflow:hidden}.tutorial-list-header:before{content:"";pointer-events:none;background:radial-gradient(circle,#6366f114 0%,#0000 70%);border-radius:50%;width:400px;height:400px;position:absolute;top:-30%;right:-5%}.tutorial-list-header-content{z-index:1;text-align:center;position:relative}.tutorial-list-title{font-size:2.5rem;font-weight:var(--main-font-bold);color:var(--main-gray-900);letter-spacing:-.03em;margin:0 0 14px}.tutorial-list-subtitle{color:var(--main-gray-500);max-width:620px;margin:0 auto;font-size:1.0625rem;line-height:1.6}.tutorial-list-clear-filter{border:1px solid var(--main-gray-200);border-radius:var(--main-radius-lg);color:var(--main-gray-600);font-size:var(--main-text-sm);font-weight:var(--main-font-semibold);transition:all var(--main-transition);background:#fff;align-items:center;gap:6px;margin-top:20px;padding:8px 18px;text-decoration:none;display:inline-flex}.tutorial-list-clear-filter:hover{border-color:var(--main-primary);color:var(--main-primary);text-decoration:none}.tutorial-list-section{padding:12px 0 80px}.tutorial-list-count{font-size:var(--main-text-sm);color:var(--main-gray-500);font-weight:var(--main-font-medium);margin-bottom:20px}.tutorials-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;display:grid}.tutorial-card{border-radius:var(--main-radius-xl);background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f}.tutorial-card:hover{box-shadow:0 10px 25px #0000001f,0 4px 10px #00000014}.tutorial-card-link{color:inherit;text-decoration:none;display:block}.tutorial-card-image{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding-top:56.25%;position:relative;overflow:hidden}.tutorial-card-image picture{width:100%;height:100%;position:absolute;top:0;left:0}.tutorial-card-image img{object-fit:cover;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.tutorial-card:hover .tutorial-card-image img{opacity:.95}.tutorial-card-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--main-radius);font-size:var(--main-text-xs);font-weight:var(--main-font-semibold);color:var(--main-primary);background:#fffffff2;align-items:center;gap:6px;padding:6px 12px;display:inline-flex;position:absolute;top:12px;left:12px;box-shadow:0 2px 8px #0000001a}.tutorial-card-badge svg{width:14px;height:14px}.tutorial-card-content{flex-direction:column;gap:12px;padding:20px;display:flex}.tutorial-card-title{font-size:1.125rem;font-weight:var(--main-font-bold);color:var(--main-gray-900);letter-spacing:-.01em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;line-height:1.4;display:-webkit-box;overflow:hidden}.tutorial-card:hover .tutorial-card-title{color:var(--main-primary)}.tutorial-card-excerpt{color:#6b7280;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.938rem;line-height:1.6;display:-webkit-box;overflow:hidden}.tutorial-card-footer{border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding-top:12px;display:flex}.tutorial-card-meta{color:#6b7280;font-size:.813rem;font-weight:var(--main-font-medium);align-items:center;gap:6px;display:flex}.tutorial-card-meta svg{opacity:.7;width:14px;height:14px}.tutorial-card-arrow{border-radius:var(--main-radius);color:#6b7280;width:32px;height:32px;transition:all var(--main-transition-slow);background:#f3f4f6;justify-content:center;align-items:center;display:flex}.tutorial-card:hover .tutorial-card-arrow{background:var(--main-primary);color:#fff}.tutorial-card-arrow svg{width:16px;height:16px}.tutorial-list-empty{text-align:center;padding:64px 20px}.tutorial-list-empty-icon{border:1px solid var(--main-gray-200);width:88px;height:88px;color:var(--main-gray-500);background:#fff;border-radius:50%;justify-content:center;align-items:center;margin-bottom:20px;display:inline-flex}.tutorial-list-empty-title{font-size:1.375rem;font-weight:var(--main-font-bold);color:var(--main-gray-900);margin:0 0 8px}.tutorial-list-empty-message{font-size:var(--main-text-base);color:var(--main-gray-500);margin:0}.tutorial-list-pagination{justify-content:center;margin-top:48px;display:flex}.tutorial-list-pagination .pagination{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.tutorial-list-pagination .page-item .page-link{border:1px solid var(--main-gray-200);border-radius:var(--main-radius);min-width:40px;height:40px;color:var(--main-gray-600);font-weight:var(--main-font-semibold);font-size:var(--main-text-sm);transition:all var(--main-transition);background:#fff;justify-content:center;align-items:center;padding:0 12px;text-decoration:none;display:flex}.tutorial-list-pagination .page-item .page-link:hover{border-color:var(--main-primary);color:var(--main-primary-hover);background:#f0f4ff}.tutorial-list-pagination .page-item.active .page-link{background:linear-gradient(135deg, var(--main-primary) 0%, var(--main-primary-hover) 100%);border-color:var(--main-primary);color:#fff}.tutorial-list-pagination .page-item.disabled .page-link{opacity:.5;cursor:not-allowed;pointer-events:none}body.dark-mode .tutorial-list-page{background:var(--main-bg-primary)}body.dark-mode .tutorial-list-title,body.dark-mode .tutorial-list-empty-title{color:var(--main-text)}body.dark-mode .tutorial-card,body.dark-mode .tutorial-list-clear-filter,body.dark-mode .tutorial-list-empty-icon,body.dark-mode .tutorial-list-pagination .page-item .page-link{background:#ffffff08;border-color:#ffffff14}body.dark-mode .tutorial-card-title{color:var(--main-text)}body.dark-mode .tutorial-card-footer{border-top-color:#ffffff14}body.dark-mode .tutorial-card-arrow{background:#ffffff0f}body.dark-mode .tutorial-list-pagination .page-item .page-link:hover{background:#6366f11f}@media (max-width:991px){.tutorials-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}}@media (max-width:768px){.tutorial-list-header{padding:56px 0 36px}.tutorial-list-header:before{display:none}.tutorial-list-title{font-size:1.875rem}.tutorial-list-subtitle{font-size:.975rem}.tutorials-grid{grid-template-columns:1fr;gap:16px}}@media (max-width:480px){.tutorial-list-title{font-size:1.625rem}}