/* ============================================================
 * 详情页 · 1:1 对齐 eeenav（数值取自 eeenav 线上的 main.min.css / custom.css）
 *   截图      .site-img{height:300px}
 *   信息卡    .site-header-top{padding:12px 14px;gap:15px}  图标 48px
 *   权重      .sites-weight{width:52px;height:18px;margin:6px 5px 6px 0}
 *   标签      .terms-list{border-top:1px dashed}
 *   元信息    .table-div{background:#f2f4f7;padding:8px 10px}
 *   悬浮条    .detail-floating-bar{position:fixed;top:80px;居中}
 * ============================================================ */

/* ---------- 面包屑：首页 • 分类 • 站名 ---------- */
.st-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.st-breadcrumb > i.mdi { font-size: 14px; opacity: .65; }
.st-breadcrumb .st-bc-link { color: var(--text-muted); text-decoration: none; }
.st-breadcrumb .st-bc-link:hover { color: var(--theme-color); }
.st-breadcrumb .st-bc-cur { color: var(--text-color); }
.st-breadcrumb .st-bc-dot { font-style: normal; color: var(--theme-color); font-size: 9px; line-height: 1; }

/* ---------- 站点信息卡（.sites-preview） ---------- */
.st-sites-preview {
    padding: 8px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-lg);
    margin: 0 0 16px;
    min-width: 0;
    /*
     * 不能 overflow:hidden ——
     * 「手机查看」的二维码气泡是 position:absolute + top:calc(100% + 8px)，
     * 本来就伸到容器外，被这里裁成半截（站长截图反馈"二维码显示不完整"）。
     * 圆角裁切交给 .st-site-img 自己做（它自己有 border-radius + overflow:hidden），
     * 这一层不需要。
     */
    overflow: visible;
}

/* 截图：固定 300px 高（eeenav .site-img{height:300px}） */
.st-site-img {
    position: relative;
    height: 300px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--muted-bg);
    border: 1px solid var(--line-color);
}
/*
 * 截图是纯展示，不可点击。
 * 对齐 eeenav：它的 <img> 带 unfancybox（禁用灯箱），点图毫无反应，
 * 唯一入口是浮在图上的「打开网站」。所以这里也不再做 hover 缩放 ——
 * 缩放会暗示"可点"，点下去却什么都没有。
 */
.st-site-img { cursor: default; }
.st-site-img-pic { display: block; }
.st-site-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* 没截图：模糊图标占位，同尺寸不留空 */
.st-site-img-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.st-site-img-blur {
    position: absolute;
    inset: -12%;
    background-position: center;
    background-size: cover;
    filter: blur(30px) saturate(1.4);
    opacity: .5;
}
.st-site-img-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}
.st-site-img-ico img { width: 56px; height: 56px; object-fit: contain; }
.st-site-img-note {
    position: relative;
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
}

/*
 * 截图区：鼠标停留时浮出「打开网站」（对齐 eeenav 的悬停操作）
 *
 * 原来是一个常驻在右下角的小胶囊（30px 高、12.5px 字），贴在截图角落里，
 * 很容易被当成装饰而忽略。改成：悬停时整图压一层底部暗角，正中浮出胶囊按钮。
 */
.st-site-img::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 34%, rgba(15, 23, 42, .28));
    opacity: 0;
    transition: opacity .22s var(--ease);
    pointer-events: none;
}
.st-site-img:hover::after { opacity: 1; }

/*
 * 位置对齐 eeenav 的 .preview-btn：
 *   position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
 *   opacity:0 → .preview-body:hover 时 opacity:1
 * 也就是「贴图底居中」，不是图正中。原来用 top:50% 视觉上偏上，
 * 而且正中容易压住截图本身的导航栏内容。
 */
.st-site-img-open {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(241, 64, 75, .42);
    opacity: 0;
    transform: translateX(-50%) scale(.92);
    transition: opacity .2s var(--ease), transform .22s var(--ease), filter .18s var(--ease);
}
.st-site-img-open i { font-size: 15px; }
.st-site-img:hover .st-site-img-open,
.st-site-img-open:focus-visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.st-site-img-open:hover {
    filter: brightness(1.06);
    transform: translateX(-50%) scale(1.04);
}
/* 触摸设备没有 hover：按钮常驻右下角，否则永远点不到 */
@media (hover: none) {
    .st-site-img::after { display: none; }
    .st-site-img-open {
        left: auto;
        right: 10px;
        top: auto;
        bottom: 10px;
        height: 32px;
        padding: 0 14px;
        font-size: 12.5px;
        font-weight: 500;
        opacity: 1;
        transform: none;
    }
}

/* ---------- 信息主体（.site-body） ---------- */
/*
 * 详情页信息区。类名不能叫 .st-site-body ——
 * star-components.css 里那是「首页卡片的 61px 横条」(flex + height:61px)，
 * 详情页复用同名会被压成一行。这里必须用独立类名并显式纵向排列。
 */
.st-detail-body {
    display: block;
    padding: 0 6px;
}

/* 头部：图标 48px + 标题简介 + 打开网站 */
.st-site-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 6px;
    min-width: 0;
}
.st-site-header-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    max-width: 48px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line-color);
}
.st-site-name-box { flex: 1 1 auto; min-width: 0; }
.st-detail-name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-strong);
}
.st-detail-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-site-open-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(241, 64, 75, .28);
    transition: filter .18s var(--ease), transform .18s var(--ease);
}
.st-site-open-btn span { display: inline-flex; align-items: center; gap: 4px; }
.st-site-open-btn i { font-size: 14px; }
.st-site-open-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- 权重：52×18 小徽章 ---------- */
.st-sites-weight-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 4px;
}
/*
 * 权重徽章：改用平台品牌 logo 底图（对齐 eeenav 的 .sites-weight）
 *
 * 原来是 5 个渐变色块（红/蓝/黄/绿/紫）+ 白数字，看起来像 5 个彩色标签，
 * 读不出"这是百度的权重"。eeenav 用平台 logo 做底图 + 右上角白字，
 * 一眼就能认出是哪家。
 *
 * 图取自 template/default/images/weight/（已复制到 star 模板自带，
 * 不跨模板引用，免得以后动 default 把这里带崩）。
 */
.st-sites-weight {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 18px;
    margin: 6px 5px 6px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-decoration: none;
    transition: filter .18s var(--ease);
}
.st-sites-weight.is-baidu   { background-image: url("../img/weight/baidupc.png"); }
.st-sites-weight.is-mobile  { background-image: url("../img/weight/baidumobile.png"); }
.st-sites-weight.is-haosou  { background-image: url("../img/weight/360.png"); }
.st-sites-weight.is-shenma  { background-image: url("../img/weight/sm.png"); }
.st-sites-weight.is-toutiao { background-image: url("../img/weight/toutiao.png"); }
.st-sites-weight:hover { filter: brightness(1.06); }
.st-sites-weight span {
    position: absolute;
    right: 6px;
    top: 0;
    width: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ---------- 操作条（.site-go） ----------
 * 对齐 eeenav：三色描边按钮（收藏红 / 点赞绿 / 手机查看主题色），悬停变实心；
 * 报错是实心红底的图标方块。
 *
 * 原来四个按钮统一是「灰边灰字 + 悬停才变主题色」，长得一模一样，
 * 扫一眼分不出哪个是收藏、哪个是点赞。它用颜色区分，一眼就能定位。
 * 圆角也从胶囊（999px）改成 8px 圆角矩形，和它的 .btn 一致。
 */
.st-detail-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0 6px;
}
.st-go-btn {
    --go-c: var(--theme-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--go-c);
    border-radius: 8px;
    background: transparent;
    color: var(--go-c);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease),
                border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.st-go-btn i { font-size: 15px; }
.st-go-btn small {
    font-size: 12px;
    font-weight: 400;
    color: inherit;
    opacity: .72;
    font-variant-numeric: tabular-nums;
}
.st-go-fav  { --go-c: #f1404b; }
.st-go-like { --go-c: #19aa2c; }
/*
 * 手机查看不能跟着 --theme-color —— 本站主题色就是红色，
 * 跟收藏撞成同一个色，两个红按钮并排又回到"分不清"的老问题。
 * eeenav 那边靠主题色（橙）区分是因为它主题色本来就不是红。
 * 固定用标签同色系的蓝，红/绿/蓝三色一眼分开。
 */
.st-go-qr   { --go-c: #2997f7; }
.st-go-btn:hover,
.st-go-btn:focus-visible,
.st-go-btn[aria-pressed="true"] {
    background: var(--go-c);
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--go-c);
}
.st-go-btn:hover small,
.st-go-btn[aria-pressed="true"] small { opacity: .92; }
.st-go-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* 报错：实心红底图标块（对应 eeenav 那个 vc-red 图标按钮） */
.st-go-report {
    --go-c: #f1404b;
    width: 34px;
    padding: 0;
    justify-content: center;
    background: var(--go-c);
    border-color: var(--go-c);
    color: #fff;
}
.st-go-report:hover { filter: brightness(1.06); }
.st-go-btn.is-pop { animation: stLikePop .32s var(--ease); }

/*
 * 手机上不显示「手机查看」。
 * 用户本来就在手机上看，还弹一个二维码让他"用手机扫"是自相矛盾的 ——
 * 站长反馈过这一点。用 hover:none 判断（触摸设备没有悬停能力），
 * 桌面浏览器即使用户把窗口拖窄了也仍然是 hover:hover，不会被误伤。
 */
@media (hover: none) {
    .st-site-qr { display: none; }
}

/* ---------- 相关标签（.terms-list） ---------- */
.st-terms-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 6px 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(125, 125, 125, .2);
}
.st-terms-label { font-size: 12px; color: var(--text-muted); }
/*
 * 标签改成蓝色描边胶囊（对齐 eeenav 的 .vc-l-blue + rounded-pill）。
 * 原来是无边框的灰色底块，和图上的蓝底标签不是一套视觉。
 * 蓝色是它用来表示「分类/标签」的固定色，和操作条的红绿分开。
 */
.st-terms-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #2997f7;
    border-radius: 999px;
    background: rgba(41, 151, 247, .1);
    color: #2997f7;
    font-size: 12px;
    text-decoration: none;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.st-terms-item i { font-size: 12px; opacity: .85; }
.st-terms-item:hover { background: #2997f7; border-color: #2997f7; color: #fff; }
.st-terms-item:hover i { opacity: 1; }

/* ---------- 元信息（.table-div 灰底板） ---------- */
.st-table-div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 10px 6px 6px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    /* 原来写死 #f2f4f7，暗色下是一块发白的横条；跟随主题 */
    background: var(--muted-bg);
    font-size: 12px;
    color: var(--text-muted);
}
.st-td-item { display: inline-flex; align-items: center; gap: 4px; }
.st-td-item i { font-size: 13px; opacity: .7; }
.st-td-item b { font-weight: 500; color: var(--text-color); }
.st-td-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(241, 64, 75, .12);
    color: var(--theme-color);
    font-size: 11px;
}

/* ---------- 区块标题 ---------- */
.st-sec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 20px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
}
.st-sec-title i { font-size: 16px; color: var(--theme-color); }
.st-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 10px;
}
.st-sec-head .st-sec-title { margin: 0; }
.st-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--line-color);
    background: var(--card-bg);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.st-shuffle:hover { border-color: var(--theme-color); color: var(--theme-color); }

/* ---------- 数据统计图表 ---------- */
.st-chart-card { padding: 8px 4px 4px; }
.st-chart { width: 100%; height: 280px; }
.st-chart-fb {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    height: 100%;
    padding: 12px;
}
.st-chart-fb-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}
.st-chart-fb-col i {
    display: block;
    width: 100%;
    max-width: 26px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--theme-color), rgba(241, 64, 75, .22));
}
.st-chart-fb-col em { font-style: normal; font-size: 11px; color: var(--text-muted); }

/* ---------- 相关导航：截图预览卡 ---------- */
.st-preview-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.st-preview-row.is-fresh { animation: stFresh .3s var(--ease); }
@keyframes stFresh {
    from { opacity: .35; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.st-pv-card {
    position: relative;
    background: var(--card-bg, #fff);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.st-pv-card:hover {
    transform: translateY(-2px);
    border-color: rgba(241, 64, 75, .35);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .1);
}
/*
 * 版式对齐 eeenav 的 .style-sites-star-preview（实测 1440 视口）：
 * 5 列、每卡约 188 宽，截图 16:9（约 105 高），下面一行 22px 图标 + 站名 + 描述，总高约 160。
 *
 * 中间试过压成「左缩略图 + 右两行」的 76px 横条，站长拿它的截图对比后指出不对 ——
 * 它虽然比原来 234px 小，但仍是"上图下文"的预览卡，只是列多了、图小了。
 */
.st-pv-body {
    display: block;
    padding: 0;
    text-decoration: none;
    color: inherit;
}
.st-pv-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--muted-bg);
}
.st-pv-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .35s var(--ease);
}
.st-pv-card:hover .st-pv-shot { transform: scale(1.04); }
.st-pv-blur {
    position: absolute;
    inset: 0;
    /* 图标是方形小图，放大后必然模糊——正好当毛玻璃底色用 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(16px) saturate(1.3);
    transform: scale(1.15);
    opacity: .9;
}
/* 无截图时压一层渐变，避免浅色图标糊出的底色太亮、白字看不清 */
.st-pv-card.is-noshot .st-pv-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 23, 42, .16), rgba(15, 23, 42, .52));
    pointer-events: none;
}
.st-pv-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 卡片宽约 188（5 列），首字母跟着这个宽度定 */
    font-size: 28px;
    font-weight: 700;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
}
@media (min-width: 768px) {
    .st-pv-letter { font-size: 34px; }
}
/* data-letter 之前没有任何地方消费，首字母一直不显示（纯 CSS 取用，不依赖 JS） */
.st-pv-letter::before { content: attr(data-letter); }
.st-pv-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px 11px;
}
.st-pv-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--muted-bg);
}
.st-pv-ico img { width: 22px; height: 22px; object-fit: contain; }
.st-pv-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-pv-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-pv-desc {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-pv-goto {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all .22s var(--ease);
}
.st-pv-goto i { font-size: 14px; }
.st-pv-card:hover .st-pv-goto { opacity: 1; transform: translate(0, 0); }

/* ---------- 数据评估 ---------- */
.st-eval { padding: 0; overflow: hidden; }
.st-eval-body { padding: 14px 16px; }
.st-eval-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.st-eval-links a {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--line-color);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-color);
    text-decoration: none;
    transition: all .18s var(--ease);
}
.st-eval-links a:hover { border-color: var(--theme-color); color: var(--theme-color); }
.st-eval-title { margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.st-eval-text { margin: 0; font-size: 12px; line-height: 1.75; color: var(--text-muted); }
.st-eval-foot {
    padding: 9px 16px;
    border-top: 1px solid var(--line-color);
    background: var(--muted-bg);
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- 滚动吸顶悬浮条（.detail-floating-bar） ---------- */
.st-dfb {
    position: fixed;
    left: 50%;
    top: 80px;
    z-index: 99;
    width: calc(100% - 20px);
    max-width: 900px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .92);
    border: 1px solid #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
    backdrop-filter: saturate(2) blur(15px);
    -webkit-backdrop-filter: saturate(2) blur(15px);
    transform: translate(-50%, -50px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease-out, transform .24s ease-out;
}
.st-dfb.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/*
 * 暗色：这条悬浮条原来是 92% 白 + 1px 白边，在深色页面上是一块发光的白板
 * （站长截图里页面顶部那条白条就是它）。改成深色半透明 + 浅描边。
 */
html[data-theme="dark"] .st-dfb {
    background: rgba(30, 32, 36, .92);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
}
.st-dfb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.st-dfb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-dfb-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line-color);
}
.st-dfb-info { display: flex; flex-direction: column; min-width: 0; }
.st-dfb-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-dfb-desc {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-dfb .st-site-open-btn { height: 32px; padding: 0 16px; font-size: 13px; }

/* ---------- 反馈弹窗里的按钮（沿用旧类名，避免弹窗无样式） ---------- */
.st-fb-foot .st-detail-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    border: 1px solid var(--line-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
}
.st-fb-foot .st-detail-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.st-fb-foot .st-detail-visit:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 响应式 ---------- */
/* 相关导航列数：对齐 eeenav 在 1440 视口下的 5 列；向下逐级收 */
@media (min-width: 768px) {
    .st-preview-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .st-preview-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .st-preview-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .st-site-img { height: 200px; }
    .st-site-header { padding: 10px 4px; gap: 10px; }
    .st-site-header-icon { width: 40px; height: 40px; max-width: 40px; }
    .st-detail-name { font-size: 17px; }
    .st-detail-desc { -webkit-line-clamp: 2; font-size: 12px; }
    .st-site-open-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }
    .st-sites-weight { width: 46px; height: 17px; }
    .st-sites-weight span { line-height: 17px; font-size: 11px; }
    .st-go-btn { height: 30px; padding: 0 11px; font-size: 12px; }
    .st-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .st-chart { height: 210px; }
    .st-dfb { top: 72px; padding: 8px 10px; }
    .st-dfb-desc { display: none; }
    .st-dfb-icon { width: 32px; height: 32px; }
}