.article-search{width:min(var(--shell,1180px),calc(100% - 28px));margin:36px auto 0}
.article-search label{display:block;margin-bottom:9px;color:var(--secondary,#171426);font-weight:800}
.article-search-field{position:relative;display:flex;align-items:center;max-width:680px}
.article-search-field>span{position:absolute;left:18px;z-index:1;font-size:1.05rem}
.article-search input{width:100%;height:54px;padding:0 50px;border:1px solid var(--line,#dfe3ea);border-radius:999px;background:var(--surface,#fff);color:inherit;font:inherit;box-shadow:0 8px 24px rgba(20,24,36,.07);outline:none}
.article-search input:focus{border-color:var(--primary,#6c5ce7);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary,#6c5ce7) 15%,transparent)}
.article-search button{position:absolute;right:8px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--muted,#69717e);font-size:1.5rem;cursor:pointer}
.article-search button:hover{background:var(--surface-alt,#f2f4f7)}
.article-search-status{min-height:1.4em;margin:8px 0 0;color:var(--muted,#69717e);font-size:.84rem}
.article-search-empty{width:min(var(--shell,1180px),calc(100% - 28px));margin:0 auto 50px;padding:32px;border:1px dashed var(--line,#dfe3ea);border-radius:var(--radius,18px);text-align:center;color:var(--muted,#69717e)}
.blog-grid>.card[hidden],.blog-grid>.blog-card[hidden],.blog-grid>.ad-slot[hidden]{display:none}
@media(max-width:767px){.article-search{margin-top:26px}.article-search input{height:52px}}