:root{
--ueos-search-bg: rgba(0,0,0,0.72);
--ueos-search-card: rgba(10,10,14,0.92);
--ueos-search-border: rgba(255,255,255,0.14);
--ueos-search-text: rgba(255,255,255,0.92);
--ueos-search-muted: rgba(255,255,255,0.65);
}
/* overlay */
#ueos-search-overlay{
position:fixed; inset:0;
display:none;
background: var(--ueos-search-bg);
z-index: 99999;
padding: 18px;
}
#ueos-search-overlay.open{ display:block; }
#ueos-search-card{
max-width: 860px;
margin: 6vh auto 0 auto;
background: var(--ueos-search-card);
border: 1px solid var(--ueos-search-border);
border-radius: 18px;
box-shadow: 0 22px 70px rgba(0,0,0,0.55);
overflow:hidden;
}
#ueos-search-top{
display:flex;
gap: 10px;
align-items:center;
padding: 14px 14px 10px 14px;
border-bottom: 1px solid var(--ueos-search-border);
}
#ueos-search-input{
flex:1;
width:100%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--ueos-search-text);
border-radius: 12px;
padding: 12px 12px;
outline:none;
font-size: 16px;
}
#ueos-search-hint{
color: var(--ueos-search-muted);
font-size: 12px;
white-space: nowrap;
}
#ueos-search-results{
max-height: 56vh;
overflow:auto;
padding: 10px 10px 14px 10px;
}
.ueos-search-item{
display:block;
padding: 10px 12px;
border-radius: 12px;
text-decoration:none;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
margin: 8px 4px;
}
.ueos-search-item:hover{
background: rgba(255,255,255,0.06);
}
.ueos-search-title{
color: var(--ueos-search-text);
font-size: 15px;
line-height: 1.2;
}
.ueos-search-path{
color: var(--ueos-search-muted);
font-size: 12px;
margin-top: 4px;
}
/* mobile tweaks */
@media (max-width: 480px){
#ueos-search-card{ margin-top: 4vh; border-radius: 14px; }
#ueos-search-input{ font-size: 16px; } /* keep iOS from zooming */
}