/* ============================================
   游民联盟 - 全站统一搜索组件（Global Search）
   首页 / 系列页 / 详情页 / 联系我们 页共用
   ============================================ */
:root{
    --gs-primary:#1a78e4;
    --gs-primary-dark:#1568c9;
    --gs-primary-soft:#eaf3fd;
    --gs-surface:#ffffff;
    --gs-field:#f1f4f8;
    --gs-field-hover:#e8ecf2;
    --gs-border:#e4e9f0;
    --gs-text:#1c3645;
    --gs-text-2:#6a6b6d;
    --gs-text-3:#9aa5b4;
    --gs-shadow:0 12px 36px rgba(28,54,69,.14);
    --gs-radius:999px;
}

/* ========== 触发器（桌面端） ========== */
.gs-search{position:relative;flex:0 0 auto;margin-left:auto;z-index:1200;}
.gs-search__field{
    display:flex;align-items:center;gap:6px;
    height:38px;padding:0 6px 0 13px;
    background:var(--gs-surface);
    border:1px solid var(--gs-primary);border-radius:var(--gs-radius);
    box-shadow:0 1px 3px rgba(26,120,228,.10);
    transition:background .22s,border-color .22s,box-shadow .22s,width .22s;
}
/* 悬停：边框加深、阴影加重，提示可交互 */
.gs-search__field:hover{border-color:var(--gs-primary-dark);box-shadow:0 2px 8px rgba(26,120,228,.18);}
/* 聚焦：浅蓝底 + 蓝边 + 蓝色光晕，突出"正在输入"但不喧宾夺主 */
.gs-search__field:focus-within{
    background:var(--gs-primary-soft);
    border-color:var(--gs-primary);
    box-shadow:0 0 0 3px rgba(26,120,228,.16),0 4px 14px rgba(26,120,228,.18);
}
.gs-search__icon{width:15px;height:15px;flex:0 0 auto;fill:var(--gs-primary);transition:fill .22s;}
.gs-search__field:focus-within .gs-search__icon{fill:var(--gs-primary);}
.gs-search__input{
    flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;
    font-size:14px;font-family:inherit;color:var(--gs-text);
    transition:color .22s;
}
.gs-search__input::placeholder{color:var(--gs-text-3);transition:color .22s;}
.gs-search__field:focus-within .gs-search__input{color:var(--gs-primary-dark);}
.gs-search__field:focus-within .gs-search__input::placeholder{color:var(--gs-primary);}
.gs-search__clear{
    flex:0 0 auto;width:20px;height:20px;padding:0;border:0;border-radius:50%;
    background:#c6ced8;color:#fff;font-size:13px;line-height:1;cursor:pointer;
    display:none;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.gs-search__clear.is-show{display:flex;}
.gs-search__clear:hover{background:#a9b3bf;}
/* 聚焦时清空按钮反白 */
.gs-search__field:focus-within .gs-search__clear{background:var(--gs-primary);color:#fff;}
.gs-search__field:focus-within .gs-search__clear:hover{background:var(--gs-primary-dark);}
.gs-search__submit{
    flex:0 0 auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;
    background:var(--gs-primary);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:1;transform:scale(1);
    transition:opacity .2s,transform .2s,background .2s,box-shadow .2s;
}
/* 聚焦时按钮变白 + 蓝图标，与浅蓝底形成"按下"感 */
.gs-search__field:focus-within .gs-search__submit{
    background:#fff;box-shadow:0 1px 5px rgba(26,120,228,.30);
}
.gs-search__submit:hover{background:var(--gs-primary-dark);}
.gs-search__field:focus-within .gs-search__submit:hover{background:#fff;box-shadow:0 1px 8px rgba(26,120,228,.45);}
.gs-search__submit svg{width:14px;height:14px;fill:#fff;transition:fill .22s;}
.gs-search__field:focus-within .gs-search__submit svg{fill:var(--gs-primary);}

/* ========== 结果面板 ========== */
.gs-panel{
    position:absolute;top:calc(100% + 8px);right:0;
    width:340px;max-height:min(430px,70vh);overflow-y:auto;overscroll-behavior:contain;
    background:var(--gs-surface);border:1px solid var(--gs-border);border-radius:14px;
    box-shadow:var(--gs-shadow);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s;
}
.gs-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.gs-panel__label{
    padding:11px 14px 7px;font-size:11px;letter-spacing:.6px;color:var(--gs-text-3);
    text-transform:uppercase;font-weight:bold;
}
.gs-item{
    display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;
    text-decoration:none;transition:background .16s;
}
.gs-item:hover,.gs-item.is-active{background:var(--gs-primary-soft);}
.gs-item__img{
    width:34px;height:34px;flex:0 0 auto;border-radius:9px;
    background:var(--gs-field);object-fit:contain;
}
.gs-item__body{flex:1 1 auto;min-width:0;}
.gs-item__name{
    font-size:14px;color:var(--gs-text);line-height:1.4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gs-item__name mark{background:transparent;color:var(--gs-primary);font-weight:bold;}
.gs-item__meta{
    font-size:12px;color:var(--gs-text-3);line-height:1.5;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gs-item__go{
    flex:0 0 auto;font-size:12px;color:var(--gs-primary);opacity:0;
    transform:translateX(-4px);transition:opacity .18s,transform .18s;
}
.gs-item:hover .gs-item__go,.gs-item.is-active .gs-item__go{opacity:1;transform:translateX(0);}
.gs-panel__empty{padding:30px 18px;text-align:center;}
.gs-panel__empty svg{width:34px;height:34px;fill:#cdd5de;margin-bottom:8px;}
.gs-panel__empty p{font-size:13px;color:var(--gs-text-3);line-height:1.7;}
.gs-panel__foot{
    padding:9px 14px;border-top:1px solid var(--gs-border);
    font-size:11px;color:var(--gs-text-3);display:flex;justify-content:space-between;gap:8px;
}
.gs-panel__foot kbd{
    font-family:inherit;font-size:11px;background:var(--gs-field);
    border-radius:4px;padding:1px 5px;color:var(--gs-text-2);
}

/* ========== 卡片筛选空结果提示 ========== */
.gs-cards-empty{
    margin-top:16px;padding:26px 20px;text-align:center;
    background:var(--white);border:1px dashed var(--gs-border);border-radius:12px;
}
.gs-cards-empty p{font-size:14px;color:var(--gs-text-2);margin-bottom:12px;}
.gs-cards-empty__btn{
    padding:7px 20px;border:0;border-radius:20px;cursor:pointer;
    background:var(--gs-primary);color:#fff;font-size:13px;font-family:inherit;
    transition:background .2s;
}
.gs-cards-empty__btn:hover{background:var(--gs-primary-dark);}

/* ========== 移动端 ========== */
.gs-toggle{
    display:none;flex:0 0 auto;
    width:38px;height:38px;margin-left:auto;
    align-items:center;justify-content:center;
    border:none;background:var(--gs-field);border-radius:12px;cursor:pointer;
    transition:background .2s;
}
.gs-toggle:hover{background:var(--gs-field-hover);}
.gs-toggle svg{width:19px;height:19px;fill:var(--gs-text);}
.gs-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(28,54,69,.45);
    opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
    padding:16px 14px;display:flex;justify-content:center;align-items:flex-start;
}
.gs-overlay.is-open{opacity:1;visibility:visible;}
.gs-overlay__box{
    width:100%;max-width:520px;margin-top:2vh;
    background:var(--gs-surface);border-radius:16px;overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.26);
    transform:translateY(-14px);transition:transform .22s;
    display:flex;flex-direction:column;max-height:88vh;
}
.gs-overlay.is-open .gs-overlay__box{transform:translateY(0);}
.gs-overlay__head{
    display:flex;align-items:center;gap:8px;
    padding:12px 14px;border-bottom:1px solid var(--gs-border);
}
.gs-overlay__head .gs-search__field{flex:1 1 auto;width:auto!important;height:40px;}
/* 移动端浮层：聚焦用浅色高亮（浮层本身已是搜索模式，无需深底） */
.gs-overlay__head .gs-search__field:focus-within{
    background:var(--gs-surface);
    border-color:var(--gs-primary);
    box-shadow:0 0 0 3px rgba(26,120,228,.14);
}
.gs-overlay__head .gs-search__field:focus-within .gs-search__input{color:var(--gs-text);}
.gs-overlay__head .gs-search__field:focus-within .gs-search__input::placeholder{color:var(--gs-text-3);}
.gs-overlay__head .gs-search__field:focus-within .gs-search__icon{fill:var(--gs-primary);}
.gs-overlay__head .gs-search__field:focus-within .gs-search__submit{background:var(--gs-primary);box-shadow:none;}
.gs-overlay__head .gs-search__field:focus-within .gs-search__submit svg{fill:#fff;}
.gs-overlay__head .gs-search__field:focus-within .gs-search__clear{background:#c6ced8;}
.gs-overlay__head .gs-search__field:focus-within .gs-search__clear:hover{background:#a9b3bf;}
.gs-overlay__close{
    flex:0 0 auto;width:34px;height:34px;border:none;border-radius:10px;
    background:var(--gs-field);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.gs-overlay__close svg{width:16px;height:16px;fill:var(--gs-text-2);}
.gs-overlay__list{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.gs-overlay__list .gs-item{padding:10px 14px;}
.gs-overlay__list .gs-item__img{width:38px;height:38px;}
.gs-overlay__list .gs-item__name{font-size:15px;}

@media screen and (max-width:768px){
    .gs-search{display:none;}
    .gs-toggle{display:flex;}
}
@media screen and (max-width:420px){
    .gs-overlay{padding:10px 10px;}
    .gs-overlay__box{margin-top:0;border-radius:14px;}
    .gs-overlay__head{padding:10px 12px;}
}