/* 富贵导航 · 首页与分类页：搜索区、横幅、站点卡片、分类块。 */

/* ---------------- 首页搜索区 ---------------- */
.hero-search {
    background: var(--inner-bg);
    border-radius: var(--radius);
    padding: 32px 20px 30px;
    margin-bottom: 14px;
    text-align: center;
    position: relative;
    /* 必须比下面的 .hero-row 高：两者都建了层叠上下文，
       同层级时后出现在 DOM 的推荐卡片会盖住搜索联想下拉（2026-11-04 修） */
    z-index: 5;
}
.hs-tabs {
    display: flex;
    justify-content: center;
    gap: 22px;
}
.hs-tab {
    font-size: 20px;
    font-weight: 700;
    color: var(--muted2);
    cursor: pointer;
    position: relative;
    padding-bottom: 4px;
    transition: color .15s;
    user-select: none;
}
.hs-tab:hover { color: var(--text); }
.hs-tab.on { color: var(--primary); }
.hs-tab.on::before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: 2px;
    height: 9px;
    border-radius: 5px;
    background: #c9d4f5;
    opacity: .5;
    z-index: -1;
}
html[data-theme="dark"] .hs-tab.on::before { background: #2b3a9e; opacity: .6; }
.hs-box {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 620px;
    margin: 14px auto 0;
    background: var(--card);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 5px 5px 5px 16px;
    position: relative;
}
.hs-box input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
    padding: 8px 0;
}
.hs-box input::placeholder { color: var(--muted2); }
.hs-box button {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
}
.hs-box button:hover { opacity: .88; }
.hs-box button i { font-size: 19px; }
.hs-engines {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13px;
}
.hs-engine {
    color: var(--muted);
    cursor: pointer;
    position: relative;
    padding-bottom: 8px;
    transition: color .15s;
    user-select: none;
}
.hs-engine:hover { color: var(--text); }
.hs-engine.on { color: var(--primary); font-weight: 700; }
.hs-engine.on::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--primary);
}
/* 搜索联想 */
.hs-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 60;
    display: none;
    /* 纵向 flex：只有结果列表滚，底部「查看全部」始终固定在面板底边 */
    flex-direction: column;
    max-height: 340px;
    overflow: hidden;
    text-align: left;
}
/* 面板下方空间不够时向上弹（JS 会给 .is-up） */
.hs-suggest.is-up {
    top: auto;
    bottom: calc(100% + 6px);
}
.hs-suggest.show { display: flex; }

/* 结果列表：独立滚动，滚到尽头不带动页面一起滚 */
.hs-suggest .s-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.hs-suggest .s-list.is-scrollable { overscroll-behavior: contain; }

/* 滚动条要看得见：不然内容被切一半，用户不知道还能往下滑 */
.hs-suggest .s-list::-webkit-scrollbar { width: 8px; }
.hs-suggest .s-list::-webkit-scrollbar-track { background: transparent; }
.hs-suggest .s-list::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .16);
    border-radius: 999px;
}
.hs-suggest .s-list::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .3); }

/* 底部固定出口：联想只给 8 条，剩下 70 多条得有个明确去处 */
.hs-suggest .s-all {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 12px;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-radius: 0 0 9px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.hs-suggest .s-all:hover { background: var(--inner-bg); }
.hs-suggest .s-all-arrow { font-size: 14px; line-height: 1; }

html[data-theme="dark"] .hs-suggest .s-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .hs-suggest .s-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

/* 搜索区所在的卡片不能裁剪：下拉面板本来就是浮在卡片外的，
   .panel 的 overflow:hidden 会把它拦腰切断（表现为「滑不下去」） */
.panel--search,
.panel:has(.hero-search) {
    overflow: visible;
}
.hs-suggest a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
}
.hs-suggest a:hover { background: var(--inner-bg); }
.hs-suggest .s-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex: 0 0 24px;
    object-fit: cover;
    background: var(--chip-bg);
}
.hs-suggest .s-name {
    font-weight: 600;
    white-space: nowrap;   /* 窄屏下别把站名折成两三行 */
    flex: 0 0 auto;
}
.hs-suggest .s-desc {
    color: var(--muted2);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    flex: 1 1 auto;
    min-width: 0;          /* 少了这句，flex 子项不会收缩，长描述会把名字挤变形 */
}
.hs-suggest .s-empty { padding: 16px; text-align: center; color: var(--muted2); font-size: 12px; }
@media (max-width: 640px) {
    .hs-suggest .s-desc { max-width: none; }
}

/* ---------------- 首页横幅 ---------------- */
.hero-row {
    display: grid;
    /* 推荐位只放「推荐」站点，数量不定：有几张铺几列，不留空格子 */
    grid-template-columns: repeat(var(--hero-cols, 4), minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.hero-card {
    position: relative;
    min-height: 118px;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2b3a9e, #3b82f6);
    transition: transform .15s, box-shadow .15s;
}
.hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hero-card .hc-logo {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, .18);
    flex: 0 0 54px;
}
.hero-card .hc-info { min-width: 0; }
.hero-card .hc-name {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-card .hc-desc {
    margin-top: 4px;
    font-size: 11.5px;
    opacity: .82;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card .hc-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
}
.hero-card.c2 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.hero-card.c3 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.hero-card.c4 { background: linear-gradient(135deg, #b45309, #f59e0b); }

/* ---------------- 站点卡片 ---------------- */
.app-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.zn-card-hit-wrap { position: relative; min-width: 0; }
.zn-card-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 8px 0 10px;
    transition: box-shadow .15s, transform .15s, border-color .15s;
    min-width: 0;
}
.zn-card-wrap:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #dde4f5; }
html[data-theme="dark"] .zn-card-wrap:hover { border-color: #3a4256; }
.zn-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
    height: 100%;
}
.zn-chip-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 22px;
    background: var(--chip-bg);
}
.zn-chip-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.zn-card-wrap:hover .zn-chip-name { color: var(--text); }
/*
 * 详情箭头不再占位，改为浮在卡片右端。
 * 原来它是 flex 项，吃掉 22px，加上内边距和图标，卡片里给名字只剩 50px，
 * 1366 宽度下 4 个汉字就会出省略号（「萌谷导…」）。浮起来后名字能用到 77px。
 * 默认 pointer-events:none —— 否则鼠标还没移上去，点到卡片右侧会误跳详情页。
 */
.zn-chip-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted2);
    background: var(--card);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, background-color .15s, color .15s;
}
.zn-card-wrap:hover .zn-chip-arrow { opacity: 1; pointer-events: auto; }
/*
 * 箭头浮上来时会盖住名字右端 18px，所以悬停时给名字留出这块空位，
 * 让浏览器重新按省略号截断。
 * 不要用 mask 做淡出——遮罩会把省略号本身一起淡掉，看起来像字被切了一半。
 */
.zn-card-wrap:hover .zn-chip-name { padding-right: 20px; }
/* 触屏没有 hover，箭头常显，否则根本点不到详情；同时给名字让出同样的空位 */
@media (hover: none) {
    .zn-chip-arrow { opacity: 1; pointer-events: auto; }
    .zn-chip-name { padding-right: 20px; }
}
.zn-chip-arrow:hover { background: var(--primary-soft); color: var(--primary); }
.zn-chip-arrow i { font-size: 15px; }

/* ---------------- 分类页 ---------------- */
.cat-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(120deg, #3b82f6, #6366f1);
    color: #fff;
    padding: 22px 24px;
}
.cat-hero .ch-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
}
.cat-hero .ch-icon i { font-size: 28px; }
.cat-hero h1 { font-size: 24px; font-weight: 800; line-height: 1.3; }
.cat-hero .ch-sub { margin-top: 4px; font-size: 12px; opacity: .86; }
.cat-hero .ch-count {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}
.cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}
.cat-filters a {
    font-size: 12px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-text);
    transition: all .15s;
}
.cat-filters a:hover { color: var(--primary); }
.cat-filters a.on { background: var(--primary); color: #fff; }

/* 首页专属响应式：从 core 的移动端块里搬过来，必须排在桌面规则之后才能生效 */
@media (max-width: 820px) {
    .hero-search { padding: 22px 14px; }
    .hs-tab { font-size: 17px; }
    .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hero-card { min-height: 96px; padding: 13px; gap: 9px; }
    .hero-card .hc-logo { width: 42px; height: 42px; flex-basis: 42px; }
    .hero-card .hc-desc { display: none; }
}
@media (max-width: 420px) {
    .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-engines { gap: 12px; font-size: 12px; }
    .hero-row { grid-template-columns: 1fr; }
}