.search-panel .panel-body{
padding:var(--gap);
display:flex;
flex-direction:column;
overflow:hidden;
height:100%;
}
.search-form{
position:relative;
width:100%;
flex-shrink:0;
}
.search-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:2;
transition:opacity .15s ease;
}
.search-icon svg{
width:20px;
height:20px;
fill:var(--tx2);
stroke:none;
}
.search-icon.hidden{
opacity:0;
pointer-events:none;
}
.search-clear-right{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
background-color:transparent;
border:none;
border-radius:50%;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
color:var(--tx2);
font-size:22px;
font-weight:400;
line-height:1;
padding:0;
z-index:3;
}
.search-clear-right:hover{
color:var(--cl1);
background-color:var(--hv1);
}
.search-clear-right.visible{
display:flex;
}
.search-input:focus~.search-icon svg,
.search-form:focus-within .search-icon svg{
fill:var(--cl1);
}
.search-input{
width:100%;
padding:14px 44px;
font-size:18px;
font-family:var(--ff1);
background-color:var(--bg3);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
outline:none;
border-radius:var(--br2);
height:50px;
box-sizing:border-box;
}
.search-input::placeholder{
color:var(--tx2);
}
.search-input:focus{
border-color:var(--cl1);
}
.search-results{
flex:1;
display:flex;
flex-direction:column;
min-height:0;
margin-top:var(--gd2);
overflow:hidden;
}
.search-results-header{
padding:0 0 10px;
flex-shrink:0;
}
.search-results-count{
font-size:13px;
font-weight:600;
font-family:var(--ff2);
text-transform:uppercase;
letter-spacing:.5px;
color:var(--cl1);
}
.search-results-scroll{
flex:1;
overflow-y:auto;
overflow-x:hidden;
min-height:0;
padding-right:8px;
scrollbar-width:thin;
scrollbar-color:var(--bc2) transparent;
}
.search-results-scroll::-webkit-scrollbar{
width:6px;
}
.search-results-scroll::-webkit-scrollbar-track{
background:transparent;
}
.search-results-scroll::-webkit-scrollbar-thumb{
background-color:var(--bc2);
border-radius:3px;
}
.search-results-scroll::-webkit-scrollbar-thumb:hover{
background-color:var(--tx3);
}
.search-section{
margin-bottom:var(--gd2);
}
.search-section:last-child{
margin-bottom:0;
}
.search-section.filter-hidden{
display:none;
}
.search-section-label{
padding:6px 0;
font-size:12px;
font-weight:700;
font-family:var(--ff2);
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
display:flex;
align-items:center;
gap:6px;
}
.search-section-label svg{
width:14px;
height:14px;
fill:var(--tx3);
flex-shrink:0;
}
.search-item{
display:flex;
flex-direction:column;
gap:2px;
padding:10px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
margin-bottom:6px;
color:var(--tx1);
}
.search-item:last-child{
margin-bottom:0;
}
.search-item:hover,
.search-item.key-sel{
background-color:var(--hv1);
border-color:var(--cl1);
}
.search-item.search-hidden,
.search-item.filter-hidden{
display:none;
}
.search-item mark{
background-color:var(--cl1);
border-radius:4px;
color:var(--blk);
padding:0 2px;
}
.search-item-icon{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:24px;
height:24px;
}
.search-item-icon svg{
width:18px;
height:18px;
}
.search-item-icon svg path{
fill:var(--cl1);
}
.search-item:has(.search-item-icon){
flex-direction:row;
align-items:center;
gap:10px;
}
.search-item-title{
font-size:15px;
font-weight:500;
color:var(--tx1);
line-height:1.4;
}
.search-item-meta{
font-size:12px;
color:var(--tx2);
line-height:1.3;
}
.search-more{
width:100%;
padding:8px;
background-color:transparent;
border:var(--bw1) dashed var(--bc2);
border-radius:var(--br2);
color:var(--tx2);
font-size:12px;
font-weight:600;
font-family:var(--ff1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-top:6px;
}
.search-more:hover{
background-color:var(--hv1);
color:var(--cl1);
border-color:var(--cl1);
}
.search-more svg{
width:16px;
height:16px;
fill:currentColor;
}
.search-footer{
padding:var(--gd2) 0 0;
flex-shrink:0;
}
.search-footer-link{
display:flex;
align-items:center;
gap:8px;
padding:12px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);color:var(--cl1);
font-size:14px;
font-weight:600;
}
.search-footer-link:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--tx1);
}
.search-footer-link svg{
width:18px;
height:18px;
fill:currentColor;
flex-shrink:0;
}
.search-empty-state{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.search-empty-link{
color:var(--tx2);
font-size:15px;
font-weight:500;
transition:color .15s ease;
}
.search-empty-link:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}