.skan-articles-header-search {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center; background: #f5f5f5; border: 1px solid #d1d1d1;
border-radius: 24px; width: 48px; height: 48px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;
box-sizing: border-box;
} .skan-articles-header-search.is-open {
width: 300px; } .skan-articles-header-toggle {
position: absolute; right: 0; width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #666; cursor: pointer;
flex-shrink: 0;
z-index: 2; padding: 0 !important; outline: none;
} .skan-articles-header-toggle .dashicons {
margin: 0 !important;
padding: 0 !important;
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
display: flex !important;
align-items: center;
justify-content: center;
} .skan-articles-header-form {
display: flex;
flex: 1;
opacity: 0;
transition: opacity 0.3s;
padding-left: 18px; padding-right: 48px; width: 0;
}
.skan-articles-header-search.is-open .skan-articles-header-form {
opacity: 1;
width: auto;
}
.skan-articles-header-input {
width: 100%;
border: none !important;
background: transparent !important;
height: 48px;
font-size: 14px;
color: #333;
padding: 0 !important;
box-shadow: none !important;
outline: none !important;
} .skan-articles-results-grid {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 20px;
}
.skan-articles-result-card {
display: flex;
gap: 15px;
padding: 12px 15px;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
text-decoration: none;
color: #444;
transition: background 0.2s;
}
.skan-articles-result-card:hover {
background: #f9f9f9;
} .skan-articles-result-code {
font-weight: 700;
color: #222;
min-width: 110px;
flex-shrink: 0;
}
.skan-articles-result-name {
color: #777;
} .skan-articles-loading, 
.skan-articles-empty, 
.skan-articles-error {
padding: 15px;
color: #999;
font-style: italic;
text-align: center;
}