.blog-tools { margin-bottom: 36px; padding: clamp(20px, 4vw, 40px); border: 1px solid #b9bed0; border-radius: 16px; background: #ebeefa; color: #17213b; }
.blog-tools[hidden], .blog-empty[hidden], #blog-results .blog-card[hidden] { display: none !important; }
.blog-search { display: grid; gap: 12px; font-size: 15px; font-weight: 600; }
.blog-search input { width: 100%; min-width: 0; padding: 18px 20px; border: 1px solid #abb3c9; border-radius: 8px; background: #fff; color: #17213b; font: inherit; font-size: 16px; }
.blog-search input::placeholder { color: #626b80; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.blog-filters button, .blog-empty button { min-height: 44px; padding: 10px 16px; border: 1px solid #a7afc5; border-radius: 24px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.blog-filters button[aria-pressed="true"] { background: #3156ef; border-color: #3156ef; color: white; }
.blog-filters button:hover { border-color: #3156ef; }
.blog-tools :focus-visible { outline: 3px solid #3156ef; outline-offset: 4px; }
.blog-tools [data-blog-count] { font-size: 13px; color: #505b74; }
.blog-empty { padding-top: 24px; border-top: 1px solid #b9bed0; }
.blog-empty h3 { margin-bottom: 12px; font-size: 26px; }
.blog-empty button { margin-top: 20px; }