/* ==========================================================================
   ZooNav — 仿 zoo.ink 软件导航主题
   日间 / 夜间双模式：html[data-theme="dark"] 切换
   ========================================================================== */

:root {
    --zoo-color: 73, 132, 245;            /* 主题色（后台可改） */
    --zoo-black-color: 30, 41, 59;        /* 主文字 */
    --zoo-body-bg-color: 242, 247, 255;   /* 页面底色 */
    --zoo-card-bg-color: 255, 255, 255;   /* 卡片底色 */
    --zoo-hover-bg-color: 241, 242, 243;  /* 悬浮底色 */
    --zoo-line-color: #e8eef7;            /* 分隔线 */
    --zoo-text-gray: #999999;             /* 次要文字 */
    --zoo-intro-color: #606060;           /* 简介文字 */
    --zoo-shadow: 0 1px 8px rgba(30, 60, 120, .06);
}

html[data-theme="dark"] {
    --zoo-black-color: 228, 234, 242;
    --zoo-body-bg-color: 20, 24, 31;
    --zoo-card-bg-color: 29, 35, 44;
    --zoo-hover-bg-color: 39, 46, 57;
    --zoo-line-color: rgba(255, 255, 255, .08);
    --zoo-text-gray: #8b93a1;
    --zoo-intro-color: #9aa3b2;
    --zoo-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: rgba(var(--zoo-body-bg-color));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: rgba(var(--zoo-black-color));
    transition: background .25s ease;
    -webkit-font-smoothing: antialiased;
}

*, ::after, ::before { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, p, form, button, input, select, textarea { margin: 0; padding: 0; }
a, a:hover, a:active { outline: none; text-decoration: none; }
a { color: rgba(var(--zoo-black-color)); }
a:hover { color: rgba(var(--zoo-color)); }
img { border: none; }
button { background: unset; border: 0; outline: none; cursor: pointer; }
input, input:focus, select, select:focus, textarea, textarea:focus { outline: none; border: 0; }
ul, li, ol { margin: 0; padding: 0; list-style: none; }
* { -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(var(--zoo-card-bg-color)); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4451; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: rgba(var(--zoo-color)); }

.zoo-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   头部
   ========================================================================== */
.zoo-head { display: flex; align-items: center; min-height: 44px; }
.zoo-head-logo { display: flex; align-items: center; gap: 10px; }
.zoo-head-logo .zn-logo-img { height: 34px; width: auto; }
.zoo-head-logo h1, .zoo-head-logo .zn-logo-text {
    margin: 0; padding: 0; letter-spacing: 3px;
    display: flex; font-size: 26px; font-weight: 700;
}
.zoo-head-logo .zn-logo-text-box { display: flex; align-items: center; }
.zoo-head-logo .zn-logo-text-box a { font-size: 26px; font-weight: 700; letter-spacing: 3px; }
.zoo-head-logo a { color: rgba(var(--zoo-black-color)); }
.zoo-head-logo .zn-logo-sub {
    font-size: 12px; color: var(--zoo-text-gray); letter-spacing: 1px;
    border-left: 1px solid var(--zoo-line-color); padding-left: 10px; line-height: 1.5;
}
.zoo-head-center { flex: 1; }
.zoo-head-menu { display: flex; align-items: center; }
.zoo-head-menu div { margin-left: 0; }
.zoo-head-menu a {
    display: block; font-size: 14px; color: rgba(var(--zoo-black-color));
    padding: 6px 6px; border-radius: 4px; transition: all .2s ease;
}
.zoo-head-menu a:hover { background: rgba(var(--zoo-color), .1); color: rgba(var(--zoo-color)); }

/* ==========================================================================
   顶部：Banner + 最近更新
   ========================================================================== */
main { margin-bottom: 10px; }
.zoo-top { display: flex; width: 100%; margin-top: 15px; gap: 15px; max-height: 200px; }

.zoo-banner {
    width: 70%;
    position: relative;
    background-color: rgba(var(--zoo-color));
    background-image: linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%),
        radial-gradient(420px 220px at 88% 118%, rgba(255, 255, 255, .25), transparent 60%),
        radial-gradient(320px 190px at 12% -20%, rgba(255, 255, 255, .18), transparent 60%);
    border-radius: 4px;
    padding: 60px 34px;
    overflow: hidden;
    isolation: isolate;
    background-repeat: no-repeat;
    background-position: right 0px bottom -30px;
    -webkit-user-select: none; user-select: none;
}
.zoo-banner .zn-banner-bgimg {
    position: absolute; right: 10px; bottom: 0; height: 100%; width: auto;
    opacity: .9; pointer-events: none; z-index: 0;
}
.zoo-page .zoo-banner { width: 100%; }

.zoo-banner::before {
    content: '';
    position: absolute;
    width: 320px; height: 240px;
    background: radial-gradient(circle at 30% 40%, #ffe68f, #f9b84a);
    top: -40px; right: -20px;
    transform: rotate(10deg) skew(-8deg, 4deg);
    border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
    opacity: .5;
    filter: blur(6px) drop-shadow(0 4px 12px rgba(255, 210, 0, .2));
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}
.zoo-banner::after {
    content: '';
    position: absolute;
    width: 240px; height: 200px;
    background: radial-gradient(circle at 70% 20%, #b8e1ff, #6aa6ff);
    bottom: -30px; left: -20px;
    transform: rotate(-12deg) skew(6deg, -2deg);
    border-radius: 40% 70% 30% 60% / 60% 30% 70% 40%;
    opacity: .4;
    filter: blur(10px) drop-shadow(0 6px 14px rgba(73, 132, 245, .3));
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
.zoo-banner .blob-extra--1 {
    position: absolute;
    width: 180px; height: 180px;
    background: radial-gradient(circle at 40% 60%, #b3d9ff, #4a7cf7);
    bottom: 20px; right: 30px;
    transform: rotate(20deg) skew(-6deg, 8deg);
    border-radius: 60% 40% 30% 70% / 50% 40% 60% 50%;
    opacity: .25;
    filter: blur(12px);
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 0;
}
.zoo-banner .blob-extra--2 {
    position: absolute;
    width: 130px; height: 160px;
    background: radial-gradient(circle at 20% 30%, #ffdbb5, #ff9f6e);
    top: 10px; left: 40px;
    transform: rotate(-15deg) skew(5deg, -3deg);
    border-radius: 40% 60% 70% 30% / 30% 50% 60% 70%;
    opacity: .3;
    filter: blur(16px);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}
.zoo-banner h2, .zoo-banner p {
    position: relative; z-index: 2;
    color: #FFFFFF;
    text-shadow: 0 4px 20px rgba(0, 20, 50, .25), 0 2px 4px rgba(0, 0, 0, .05);
    margin: 0; padding: 0;
}
.zoo-banner h2 { font-size: 26px; font-weight: 600; margin-bottom: 15px; letter-spacing: 3px; }
.zoo-banner p { font-size: 16px; letter-spacing: 1.5px; opacity: .95; }

/* ---- 横幅光斑飘动（v1.7）：4 个光斑各自漂移 + 明暗呼吸 ---- */
/* 时长由后台「横幅光效速度」注入的 --zn-bn-dur 控制（默认 6s） */
.zoo-banner::before        { animation: znBanDrift1 var(--zn-bn-dur, 6s) ease-in-out infinite; }
.zoo-banner::after         { animation: znBanDrift2 calc(var(--zn-bn-dur, 6s) * 1.25) ease-in-out infinite; }
.zoo-banner .blob-extra--1 { animation: znBanDrift3 calc(var(--zn-bn-dur, 6s) * .85) ease-in-out infinite; }
.zoo-banner .blob-extra--2 { animation: znBanDrift4 calc(var(--zn-bn-dur, 6s) * 1.1) ease-in-out infinite; }
/* 关键帧里必须带上各自原来的 rotate/skew 基准，否则动画会把倾斜角冲掉 */
@keyframes znBanDrift1 {
    0%, 100% { transform: rotate(10deg) skew(-8deg, 4deg) translate(0, 0) scale(1); opacity: .5; }
    50%      { transform: rotate(10deg) skew(-8deg, 4deg) translate(-22px, 16px) scale(1.14); opacity: .64; }
}
@keyframes znBanDrift2 {
    0%, 100% { transform: rotate(-12deg) skew(6deg, -2deg) translate(0, 0) scale(1); opacity: .4; }
    50%      { transform: rotate(-12deg) skew(6deg, -2deg) translate(20px, -14px) scale(1.16); opacity: .54; }
}
@keyframes znBanDrift3 {
    0%, 100% { transform: rotate(20deg) skew(-6deg, 8deg) translate(0, 0) scale(1); opacity: .25; }
    50%      { transform: rotate(20deg) skew(-6deg, 8deg) translate(16px, -20px) scale(1.12); opacity: .4; }
}
@keyframes znBanDrift4 {
    0%, 100% { transform: rotate(-15deg) skew(5deg, -3deg) translate(0, 0) scale(1); opacity: .3; }
    50%      { transform: rotate(-15deg) skew(5deg, -3deg) translate(-18px, 14px) scale(.88); opacity: .42; }
}
/* 手机端：大模糊的两个光斑不动，省电也避免掉帧 */
@media (max-width: 767px) {
    .zoo-banner::after,
    .zoo-banner .blob-extra--2 { animation: none; }
}

/* ---- 最近更新 ---- */
.zoo-rece {
    flex: 1;
    background-color: rgba(var(--zoo-card-bg-color));
    border-radius: 4px;
    padding: 10px;
    border-top: 4px solid rgba(var(--zoo-color));
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--zoo-shadow);
}
.zoo-rece-title h3 {
    padding: 5px 10px; display: inline-block; margin: 0;
    position: relative; top: -10px;
    background: rgba(var(--zoo-color));
    border-radius: 0 0 4px 4px;
    letter-spacing: 2px; font-size: 14px; color: #FFFFFF; font-weight: 600;
    flex-shrink: 0;
}
/* 标题前的火焰小图标（主题内置 PNG） */
.zn-h3-ico {
    width: 15px; height: 15px; object-fit: contain; display: inline-block;
    margin-right: 5px; vertical-align: -3px;
}
.zoo-rece-content { flex: 1; overflow: hidden; min-height: 0; }
.zoo-rece-list {
    height: 100%; overflow-y: auto; padding-right: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(var(--zoo-color)) transparent;
}
.zoo-rece-list::-webkit-scrollbar { width: 2px; }
.zoo-rece-list::-webkit-scrollbar-track { background: transparent; }
.zoo-rece-list::-webkit-scrollbar-thumb { background: rgba(var(--zoo-color)); border-radius: 2px; }

.zoo-rece-item {
    display: flex; font-size: 12px; padding: 5px 0;
    border-bottom: 1px dashed var(--zoo-line-color);
    line-height: 14px; align-items: center;
}
.zoo-rece-item:last-child { border-bottom: 0; }
.zoo-rece-item-info { display: flex; flex: 1; align-items: center; min-width: 0; color: rgba(var(--zoo-black-color)); }
.zoo-rece-item-info:hover { color: rgba(var(--zoo-color)); }
.zoo-rece-item-img {
    border-radius: 4px; overflow: hidden; border: 1px solid var(--zoo-line-color);
    margin-right: 6px; width: 18px; height: 18px; flex-shrink: 0;
    background: rgba(var(--zoo-color), .06); color: rgba(var(--zoo-color));
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.zoo-rece-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zoo-rece-txt { display: flex; align-items: center; justify-content: center; font-style: normal; width: 100%; height: 100%; }
.zoo-rece-item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoo-rece-item-time { margin-left: 8px; color: var(--zoo-text-gray); flex-shrink: 0; }

/* ---- 热度排名徽章（1-10）：前三名金银铜，其余灰色 ---- */
.zn-rank {
    width: 18px; height: 18px; flex: 0 0 18px;
    margin-right: 6px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; font-style: normal; line-height: 1;
    background: #F2F3F5; color: #9AA0A6;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.zn-rank-1 { background: linear-gradient(135deg, #FFD666, #FAAD14); color: #FFFFFF; box-shadow: 0 2px 6px rgba(250, 173, 20, .35); }
.zn-rank-2 { background: linear-gradient(135deg, #E9EAEC, #BFC4CB); color: #FFFFFF; box-shadow: 0 2px 6px rgba(160, 168, 180, .35); }
.zn-rank-3 { background: linear-gradient(135deg, #FFB27C, #F0812F); color: #FFFFFF; box-shadow: 0 2px 6px rgba(240, 129, 47, .35); }
[data-theme="dark"] .zn-rank { background: rgba(255, 255, 255, .10); color: #A8AEB8; box-shadow: none; }
[data-theme="dark"] .zn-rank-2 { color: rgba(255, 255, 255, .92); }

/* ---- 热度排行标题行：「随机冲浪」与标题同一行（右侧） ---- */
.zoo-rece-title {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; flex-wrap: nowrap;
}
.zoo-rece-title h3 { padding: 5px 9px; letter-spacing: 1px; }
.zoo-rece-random {
    display: flex; align-items: center; gap: 5px; position: relative; top: -9px;
    flex: 1 1 auto; min-width: 0; justify-content: flex-end;
}
.zn-random-sel { position: relative; display: inline-flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.zn-random-sel select {
    -webkit-appearance: none; appearance: none;
    height: 26px; line-height: 26px; border-radius: 6px;
    padding: 0 18px 0 8px; max-width: 96px; min-width: 0;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: rgba(var(--zoo-color));
    background-color: rgba(var(--zoo-color), .09);
    border: 1px solid rgba(var(--zoo-color), .2);
    cursor: pointer; transition: all .2s ease;
}
.zn-random-sel select:hover { background-color: rgba(var(--zoo-color), .16); }
.zn-random-sel select option { color: #333; background: #fff; }
html[data-theme="dark"] .zn-random-sel select option { color: #e4eaf2; background: #1d232c; }
.zn-random-sel em {
    position: absolute; right: 6px; pointer-events: none;
    display: inline-flex; align-items: center; color: rgba(var(--zoo-color));
}
.zn-random-sel em svg { width: 11px; height: 11px; }
.zn-random-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 11px; border-radius: 6px; white-space: nowrap;
    background: rgba(var(--zoo-color)); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1;
    box-shadow: rgba(var(--zoo-color), .28) 0 3px 10px;
    transition: all .2s ease;
}
.zn-random-btn i { display: inline-flex; font-size: 13px; }
.zn-random-btn .zn-random-img { width: 14px; height: 14px; object-fit: contain; display: block; }
.zn-random-btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.zn-random-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.zn-random-btn.is-loading i { animation: znSpin .9s linear infinite; }
@keyframes znSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   分类卡片流 —— 导航卡片（图标 + 名称）
   ========================================================================== */
.zoo-soft { display: flex; flex-direction: column; }
.zoo-soft-cat { margin-top: 15px; }
.zoo-soft-cat-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
/* ---- 分类标题：圆点呼吸装饰（去掉后面的数量） ---- */
.zoo-soft-cat-title { font-size: 20px; position: relative; padding-left: 22px; }
.zoo-soft-cat-title::before {
    content: ''; position: absolute; left: 0; top: 50%; margin-top: -5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(var(--zoo-color));
    animation: znDotBreath 2s ease-in-out infinite;
}
@keyframes znDotBreath {
    0%   { box-shadow: 0 0 0 0 rgba(var(--zoo-color), .5); background: rgba(var(--zoo-color)); }
    65%  { box-shadow: 0 0 0 9px rgba(var(--zoo-color), 0); background: rgba(var(--zoo-color), .72); }
    100% { box-shadow: 0 0 0 0 rgba(var(--zoo-color), 0); background: rgba(var(--zoo-color)); }
}
/* ---- 分类标题：后台「分类图标」上传的图标（设置后替换上面的圆点） ---- */
.zoo-soft-cat-title.has-ico { padding-left: 31px; }
.zoo-soft-cat-title.has-ico::before { display: none; }
.zoo-soft-cat-title .zn-cat-ico {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 23px; height: 23px; object-fit: contain; display: block;
    border-radius: 6px;
}
/* 分类标题圆点是纯装饰，系统「减少动效」时允许关掉；
   但页脚光斑是主题的视觉特征，不再跟着系统偏好一起关（和日期/天气/友链的处理保持一致）。 */
@media (prefers-reduced-motion: reduce) {
    .zoo-soft-cat-title::before { animation: none; }
}
.zoo-soft-cat-desc { color: rgba(var(--zoo-black-color), .5); font-size: 14px; }
.zoo-soft-list { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.zoo-soft-item { position: relative; width: calc(100% / var(--zoo-cols, 6)); }

/* ---- 单张导航卡片（v1.7.6：扁平化「底部色条」）----
   常态 = 卡片底色 + 1px 细描边，干净无装饰；悬停时从卡片底部滑出一条
   2px 主题色下划线，同时文字变主题色、描边微微加深。角标贴卡片右上角。 */
.zoo-nav-wrap { position: relative; margin: 5px; }
.zoo-nav-card {
    position: relative; display: flex; align-items: center; gap: 8px;
    min-height: 42px; padding: 8px 10px; border-radius: 6px;
    background-color: rgba(var(--zoo-card-bg-color));
    border: 1px solid var(--zoo-line-color);
    font-size: 13px; font-weight: 600; line-height: 1.4;
    color: rgba(var(--zoo-black-color));
    transition: border-color .2s ease, color .2s ease;
    overflow: hidden;
}
/* 底部 2px 下划线：默认横向缩到 0，悬停时从左侧滑出。
   用 ::after 伪元素而非 inset 阴影 —— 避开 .search-hit 的高亮环 box-shadow。 */
.zoo-nav-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: rgba(var(--zoo-color));
    transform: scaleX(0); transform-origin: left center;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.zoo-nav-card:hover {
    color: rgba(var(--zoo-color));
    border-color: rgba(var(--zoo-color), .38);
}
.zoo-nav-card:hover::after { transform: scaleX(1); }
.zoo-nav-icon {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: rgba(var(--zoo-color), .08); color: rgba(var(--zoo-color));
    font-size: 12px; font-weight: 800; line-height: 1;
}
.zoo-nav-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zoo-nav-ico-txt {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-style: normal; font-weight: 800;
}
.zoo-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoo-nav-card.is-red .zoo-nav-name { color: #e4393c; }
.zoo-nav-card.is-red:hover .zoo-nav-name { color: #e4393c; }
.zoo-nav-hot {
    display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0;
    font-size: 10px; font-weight: 400; color: var(--zoo-text-gray);
}
.zoo-nav-hot svg { width: 10px; height: 10px; }
.zoo-nav-app { display: inline-flex; flex-shrink: 0; font-size: 13px; color: rgba(var(--zoo-color)); }
.zoo-nav-badge {
    position: absolute; top: 0; right: 0; z-index: 2;
    font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .5px;
    padding: 3px 6px; border-radius: 0 6px 0 6px; color: #fff;
}
.zoo-nav-badge.is-rec { background: linear-gradient(135deg, #ff8a3d, #ff5c00); }
.zoo-nav-badge.is-new { background: linear-gradient(135deg, #ff5f6d, #e4393c); }
.zoo-nav-edit {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(.85);
    width: 22px; height: 22px; border-radius: 5px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--zoo-color)); color: #fff; font-size: 11px;
    opacity: 0; visibility: hidden; transition: all .2s ease;
}
.zoo-nav-wrap:hover .zoo-nav-edit { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.zoo-nav-wrap.search-hit .zoo-nav-card {
    border-color: rgba(var(--zoo-color));
    box-shadow: 0 0 0 2px rgba(var(--zoo-color), .18);
}

/* ==========================================================================
   详情页 / 页面
   ========================================================================== */
.zoo-detail { margin-top: 15px; }
.zoo-detail-head {
    background: rgba(var(--zoo-card-bg-color)); border-radius: 4px; padding: 22px 26px;
    display: flex; align-items: center; gap: 16px; box-shadow: var(--zoo-shadow);
}
.zoo-detail-head .zoo-detail-icon {
    width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; font-size: 26px;
}
.zoo-detail-info { flex: 1; min-width: 0; }
.zoo-detail-title { font-size: 24px; font-weight: 700; }
.zoo-detail-meta { display: flex; gap: 14px; margin-top: 8px; color: var(--zoo-text-gray); font-size: 12px; flex-wrap: wrap; }
.zoo-detail-meta a { color: var(--zoo-text-gray); }
.zoo-detail-meta a:hover { color: rgba(var(--zoo-color)); }
.zoo-detail-body {
    background: rgba(var(--zoo-card-bg-color)); border-radius: 4px; padding: 22px 26px;
    margin-top: 15px; box-shadow: var(--zoo-shadow); line-height: 1.9; font-size: 14.5px;
    overflow-wrap: break-word;
}
.zoo-detail-body img { max-width: 100%; height: auto; border-radius: 4px; }
.zoo-detail-body h2, .zoo-detail-body h3 { margin: 18px 0 10px; }
.zoo-detail-body pre { background: rgba(var(--zoo-body-bg-color)); padding: 12px 14px; border-radius: 4px; overflow: auto; }

/* ==========================================================================
   搜索（页面内搜索结果 / 站内搜索页共用卡片）
   ========================================================================== */

/* ==========================================================================
   底部（卡片式页脚）
   ========================================================================== */
.zoo-footer { width: 100%; padding: 6px 0 26px; }
.zoo-foot-wrap { margin-top: 4px; }
.zoo-foot-card {
    position: relative; overflow: hidden;
    background: rgba(var(--zoo-card-bg-color));
    border: 1px solid var(--zoo-line-color); border-radius: 12px;
    box-shadow: var(--zoo-shadow); padding: 34px 30px 0;
}
.zoo-foot-card::before {
    content: ''; position: absolute; left: 50%; top: -130px; transform: translateX(-50%);
    width: 460px; height: 250px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 50% 62%, rgba(var(--zoo-color), var(--zn-ft-glow-a, .26)), transparent 70%);
    animation: znFootGlow 7s ease-in-out infinite;
}
/* ---- 页脚动态光斑（漂浮呼吸）---- */
/* 深浅由后台「页脚背景光效」注入的 --zn-ft-blob-a 控制 */
.zoo-foot-blob {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 42% 40%, rgba(var(--zoo-color), var(--zn-ft-blob-a, .36)), transparent 68%);
    will-change: transform, opacity;
}
.zoo-foot-blob.b1 { left: 5%;  top: 6%;    width: 180px; height: 180px; animation: znBlobA 11s ease-in-out infinite; }
.zoo-foot-blob.b2 { right: 6%; top: -6%;   width: 230px; height: 230px; opacity: .92; animation: znBlobB 14s ease-in-out infinite; }
.zoo-foot-blob.b3 { left: 42%; bottom: -70px; width: 210px; height: 210px; opacity: .84; animation: znBlobC 16s ease-in-out infinite; }
.zoo-foot-blob.b4 { right: 26%; bottom: -46px; width: 150px; height: 150px; opacity: .7;  animation: znBlobA 13s ease-in-out infinite reverse; }
.zoo-foot-blob.b5 { left: 22%; top: 34%;   width: 120px; height: 120px; opacity: .62; animation: znBlobB 9.5s ease-in-out infinite reverse; }

@keyframes znFootGlow {
    0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}
@keyframes znBlobA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -16px) scale(1.14); }
}
@keyframes znBlobB {
    0%, 100% { transform: translate(0, 0) scale(1.06); }
    50%      { transform: translate(-24px, 18px) scale(.9); }
}
@keyframes znBlobC {
    0%, 100% { transform: translate(0, 0) scale(.94); }
    50%      { transform: translate(16px, -20px) scale(1.12); }
}
.zoo-foot-main {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.zoo-foot-brand { flex: 0 1 auto; min-width: 0; }
.zoo-foot-logo {
    font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: 1px;
    color: rgba(var(--zoo-color)); user-select: none;
}
.zoo-foot-desc { margin: 8px 0 0; font-size: 13px; color: var(--zoo-text-gray); line-height: 1.7; }
.zoo-foot-meta {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; margin-top: 16px;
}
.zoo-foot-follow { display: flex; align-items: center; gap: 6px; }
.zn-foot-icon {
    width: var(--zn-ft-ico, 30px); height: var(--zn-ft-ico, 30px);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: calc(var(--zn-ft-ico, 30px) * .3); background: rgba(var(--zoo-hover-bg-color));
    color: rgba(var(--zoo-black-color)); transition: all .2s ease;
}
.zn-foot-icon svg { width: calc(var(--zn-ft-ico, 30px) - 16px); height: calc(var(--zn-ft-ico, 30px) - 16px); }
/* 自己上传的图标：去掉浅色底框和圆角，原图完整显示（图片加载失败时回退内置 SVG） */
.zn-foot-icon.has-img { padding: 0; overflow: visible; background: transparent; border-radius: 0; }
.zn-foot-icon .zn-foot-ico-img {
    display: block; width: 100%; height: 100%; padding: 0;
    object-fit: contain; border-radius: 0;
}
.zn-foot-icon .zn-foot-ico-fb {
    width: 100%; height: 100%; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
}
.zn-foot-icon .zn-foot-ico-fb svg { width: calc(var(--zn-ft-ico, 30px) - 16px); height: calc(var(--zn-ft-ico, 30px) - 16px); }
.zn-foot-icon:hover {
    background: rgba(var(--zoo-color)); color: #fff;
    transform: translateY(-2px); box-shadow: 0 5px 14px rgba(var(--zoo-color), .3);
}
/* 上传图标的悬停：不铺色块（透明底图标会被糊住），改用投影 + 上浮 */
.zn-foot-icon.has-img:hover {
    background: transparent; box-shadow: none;
    filter: drop-shadow(0 5px 9px rgba(var(--zoo-color), .45));
}

.zoo-foot-bar {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 26px; padding: 15px 0 16px; border-top: 1px solid var(--zoo-line-color);
    font-size: 12.5px; color: var(--zoo-text-gray);
}
.zoo-foot-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoo-foot-copy em { font-style: normal; opacity: .85; }
.zoo-foot-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoo-foot-links a { color: var(--zoo-text-gray); text-decoration: none; }
.zoo-foot-links a:hover { color: rgba(var(--zoo-color)); }

/* ---- 页脚「本站由 XX 提供云计算服务」----
   名称固定红色 + 可点击跳转，名称前面可放一个上传的图标 */
.zoo-foot-cloud { display: inline; }
.zoo-foot-cloud-link {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; text-decoration: none; vertical-align: middle;
}
.zoo-foot-cloud-ico {
    height: 15px; width: auto; max-width: 66px; flex: 0 0 auto;
    object-fit: contain; border-radius: 3px;
    transition: transform .18s ease;
}
.zoo-foot-cloud-name {
    color: #e5484d; font-weight: 600;
    transition: color .18s ease;
}
.zoo-foot-cloud-link:hover .zoo-foot-cloud-name {
    color: #f2555a; text-decoration: underline; text-underline-offset: 2px;
}
.zoo-foot-cloud-link:hover .zoo-foot-cloud-ico { transform: scale(1.08); }
html[data-theme="dark"] .zoo-foot-cloud-name { color: #ff6b6b; }
html[data-theme="dark"] .zoo-foot-cloud-link:hover .zoo-foot-cloud-name { color: #ff8a8a; }

/* ==========================================================================
   友情链接（卡片式 · 带站点图标）
   ========================================================================== */
.zoo-friend-wrap { margin-top: 18px; }
.zn-friend-box {
    position: relative; overflow: hidden;
    background: rgba(var(--zoo-card-bg-color));
    border: 1px solid var(--zoo-line-color); border-radius: 12px;
    box-shadow: var(--zoo-shadow);
    padding: 12px 15px 13px;
}
.zn-friend-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--zoo-color), .25) 25%, rgba(var(--zoo-color)) 50%, rgba(var(--zoo-color), .25) 75%, transparent 100%);
    background-size: 200% 100%;
    /* 流光 + 呼吸光晕：两者叠加，保证「呼吸特效」稳定可见 */
    animation: znBarFlow 5s linear infinite, znBarBreath 3.6s ease-in-out infinite;
}
.zn-friend-box:hover::before {
    animation-duration: 2.5s, 3.6s;   /* hover 时只有流光加速 */
}
.zn-friend-box::after {
    content: ''; position: absolute; right: -80px; top: -90px;
    width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 38% 42%, rgba(var(--zoo-color), .13), transparent 68%);
    animation: znBlobB 13s ease-in-out infinite;
}
.zn-friend-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px; position: relative; z-index: 1;
}
.zn-friend-title {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 14px; font-weight: 800; letter-spacing: .4px; line-height: 1.35;
}
.zn-friend-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 19px; height: 19px; border-radius: 6px; font-style: normal; color: #fff;
    background: linear-gradient(135deg, rgba(var(--zoo-color)), rgba(var(--zoo-color), .62));
    box-shadow: 0 3px 9px rgba(var(--zoo-color), .28);
}
.zn-friend-ic svg { width: 11px; height: 11px; }
/* 使用上传的友情链接图标（图片自带底色，不再画渐变底） */
.zn-friend-ic.has-img {
    background: none; box-shadow: none; border-radius: 6px; overflow: hidden;
}
.zn-friend-ic.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 图片加载失败时的兜底图标 */
.zn-friend-ic-fb {
    display: none; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-style: normal;
}
.zn-friend-ic:not(.has-img) { background: none; box-shadow: none; color: rgba(var(--zoo-color)); }
.zn-friend-ic:not(.has-img) .zn-friend-ic-fb { display: inline-flex; }
.zn-friend-apply {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: #fff; text-decoration: none;
    border-radius: 20px; padding: 4px 11px;
    background: linear-gradient(135deg, rgba(var(--zoo-color)), rgba(var(--zoo-color), .76));
    box-shadow: 0 4px 12px rgba(var(--zoo-color), .26);
    transition: all .2s ease;
}
.zn-friend-apply i { display: inline-flex; font-size: 11px; }
.zn-friend-apply:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }
.zn-friend-links {
    position: relative; z-index: 1;
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}
.zn-friend-item {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 7px;
    border: 1px solid var(--zoo-line-color);
    background: rgba(var(--zoo-hover-bg-color));
    font-size: 12px; font-weight: 600; color: rgba(var(--zoo-black-color));
    transition: border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.zn-friend-item::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
    width: 45%; transform: skewX(-18deg); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    opacity: 0; transition: opacity .25s ease;
}
.zn-friend-item:hover {
    border-color: rgba(var(--zoo-color)); color: rgba(var(--zoo-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--zoo-color), .18);
}
.zn-friend-item:hover::after { opacity: 1; left: 125%; transition: left .62s ease, opacity .2s ease; }
.zn-friend-logo {
    width: 17px; height: 17px; flex: 0 0 17px; border-radius: 4px; overflow: hidden;
    background: rgba(var(--zoo-color), .1); color: rgba(var(--zoo-color));
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; font-style: normal;
}
.zn-friend-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-friend-logo em {
    font-style: normal; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.zn-friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-friend-go {
    display: inline-flex; flex-shrink: 0; font-style: normal;
    opacity: .3; transform: rotate(-90deg); transition: all .22s ease;
}
.zn-friend-go svg { width: 10px; height: 10px; }
.zn-friend-item:hover .zn-friend-go { opacity: 1; transform: rotate(-90deg) translateY(-2px); }


/* ==========================================================================
   浮动工具栏 + 搜索条
   ========================================================================== */
.zoo-tools { position: fixed; bottom: 80px; right: 20px; display: flex; z-index: 999; flex-direction: column !important; }
.zoo-tools-item {
    width: 40px; height: 40px; font-size: 1rem; text-align: center; line-height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--zoo-card-bg-color)); border-radius: 4px;
    box-shadow: 0 1px 8px rgba(30, 60, 120, .15); cursor: pointer;
    transition: all .3s ease; margin: 3px; color: rgba(var(--zoo-black-color));
}
.zoo-tools-item:hover { color: rgba(var(--zoo-color)); transform: translateY(-2px); }
.zoo-tools-item i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
/* 彩色图标（主题内置 PNG） */
.zoo-tools-item .zn-tool-ico {
    width: 20px; height: 20px; object-fit: contain; display: block;
    transition: transform .25s ease;
}
.zoo-tools-item:hover .zn-tool-ico { transform: scale(1.12); }
/* 夜间模式：图标本身带黑色描边，给一层浅色底衬保证可辨识 */
html[data-theme="dark"] .zoo-tools-item .zn-tool-ico {
    box-sizing: content-box; padding: 3px; border-radius: 6px;
    background: rgba(255, 255, 255, .93);
}
.go-top { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.8); }
.go-top.show { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }

/* 手机端：工具栏收小并紧贴屏幕右边缘 */
@media (max-width: 576px) {
    .zoo-tools { right: 4px; bottom: 74px; }
    .zoo-tools-item {
        width: 32px; height: 32px; line-height: 32px;
        margin: 2px; border-radius: 6px;
    }
    .zoo-tools-item .zn-tool-ico { width: 17px; height: 17px; }
    html[data-theme="dark"] .zoo-tools-item .zn-tool-ico { padding: 2px; }
}

.zoo-soft-search { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 0); z-index: 9999; pointer-events: none; }
.zoo-soft-search-box {
    display: flex; padding: 10px 10px;
    background: rgba(var(--zoo-card-bg-color)); border-radius: 8px;
    align-items: center; box-shadow: 0px -2px 10px 1px rgba(0, 0, 0, .08), 0 4px 18px rgba(20,40,80,.12);
    transform: translateY(calc(100% + 20px)); opacity: 0; visibility: hidden;
    transition: transform .35s cubic-bezier(.25, .8, .3, 1), opacity .3s ease, visibility .35s;
}
.zoo-soft-search-box:not(.active) { pointer-events: none; }
.zoo-soft-search-box.active { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.zoo-soft-search-input { margin-right: 2px; }
.zoo-soft-search-input input {
    font-size: 14px; height: 20px; background: rgba(var(--zoo-black-color), .05);
    color: rgba(var(--zoo-black-color));
    padding: 12px 4px; border-radius: 4px; min-width: 150px; width: 0;
}
.zoo-soft-search-input input::placeholder { color: var(--zoo-text-gray); }
.zoo-soft-search-actions { display: flex; align-items: center; }
.zoo-soft-search-counter {
    display: flex; font-size: 12px; background: rgba(var(--zoo-black-color), .05);
    padding: 4px 8px; border-radius: 4px; font-weight: 500; white-space: nowrap;
    margin: 0 2px; height: 24px; align-items: center; min-width: 44px; justify-content: center;
    color: var(--zoo-text-gray);
}
.zoo-soft-search-nav { display: flex; }
.zoo-soft-search-nav button, .zoo-soft-search-btn, .zoo-soft-search-close {
    font-size: 12px; background: rgba(var(--zoo-black-color), .05);
    color: rgba(var(--zoo-black-color));
    padding: 4px 4px; border-radius: 4px; font-weight: 500; white-space: nowrap;
    margin: 0 2px; min-width: 32px; text-align: center; height: 24px; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.zoo-soft-search-nav button:hover, .zoo-soft-search-btn:hover, .zoo-soft-search-close:hover { background: rgba(var(--zoo-color), .12); color: rgba(var(--zoo-color)); }
.highlight-match { font-weight: 600; color: #ff0000; background: #ffff00; border-radius: 2px; padding: 0 1px; }
html[data-theme="dark"] .highlight-match { color: #7a1500; }

/* ==========================================================================
   前台设置面板（主题色 / 模式）
   ========================================================================== */
.seeting-main {
    display: flex; background: rgba(var(--zoo-card-bg-color)); width: 450px; height: 100%;
    position: fixed; right: 0; top: 0; padding: 15px; max-width: 100%;
    box-shadow: -2px 0 18px rgba(20, 40, 80, .12); transform: translateX(100%);
    transition: transform .3s ease; z-index: 10001;
}
.seeting-main.show { transform: translateX(0); }
.setting-menu { width: 80px; flex-shrink: 0; }
.setting-item {
    position: relative; font-size: 13px; padding: 5px 10px; border-radius: 4px;
    margin-bottom: 5px; line-height: 1.4; cursor: pointer;
    color: rgba(var(--zoo-black-color));
}
.setting-item.active, .setting-item:hover { background: rgba(var(--zoo-color), .1); color: rgba(var(--zoo-color)); }
.setting-item.active:after, .setting-item:hover:after {
    content: ""; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);
    width: 3px; height: 14px; background: rgba(var(--zoo-color)); border-radius: 0 2px 2px 0;
}
.setting-main-wrap {
    flex: 1; padding: 10px; background: rgba(var(--zoo-color), .08); border-radius: 4px;
    margin-left: 10px; overflow: auto; scrollbar-width: none;
}
.setting-main-wrap::-webkit-scrollbar { display: none; }
.zn-panel-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.zn-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.zn-color-item {
    height: 44px; border-radius: 6px; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 12px; font-weight: 600; transition: transform .15s;
    border: 2px solid transparent;
}
.zn-color-item:hover { transform: scale(1.06); }
.zn-color-item.active { border-color: rgba(var(--zoo-black-color)); }
.zn-mode-row { display: flex; flex-direction: column; gap: 8px; }
.zn-mode-btn {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 6px;
    background: rgba(var(--zoo-card-bg-color)); cursor: pointer; font-size: 13px; font-weight: 600;
    border: 2px solid transparent; color: rgba(var(--zoo-black-color)); text-align: left;
}
.zn-mode-btn.active { border-color: rgba(var(--zoo-color)); color: rgba(var(--zoo-color)); }
.zn-mode-btn i { font-style: normal; display: inline-flex; font-size: 16px; }
.zn-mode-btn .zn-mode-desc { display: block; font-size: 11px; font-weight: 400; color: var(--zoo-text-gray); }
.zn-setting-mask {
    position: fixed; inset: 0; background: rgba(20, 30, 50, .25); z-index: 10000;
    opacity: 0; visibility: hidden; transition: all .3s;
}
.zn-setting-mask.show { opacity: 1; visibility: visible; }

/* ==========================================================================
   搜索结果页
   ========================================================================== */
.zoo-search-head {
    margin-top: 15px; background: rgba(var(--zoo-card-bg-color)); border-radius: 4px;
    padding: 18px 22px; box-shadow: var(--zoo-shadow);
}
.zoo-search-head h2 { font-size: 18px; }
.zoo-search-head h2 em { color: rgba(var(--zoo-color)); font-style: normal; }
.zoo-empty {
    margin-top: 15px; background: rgba(var(--zoo-card-bg-color)); border-radius: 4px;
    padding: 60px 20px; text-align: center; color: var(--zoo-text-gray); box-shadow: var(--zoo-shadow);
}
.zoo-empty .zn-big { font-size: 40px; display: block; margin-bottom: 12px; opacity: .5; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1205px) {
    .zoo-head { margin: 0 10px; }
    main { margin: 0 10px 20px 10px; }
    .zoo-foot-wrap, .zoo-friend-wrap { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 992px) {
    .zoo-banner { background-position: right 0px bottom -45px; }
    .zoo-soft-item { width: 25%; }
}
@media (max-width: 768px) {
    .zoo-head { min-height: 40px; }
    .zoo-head-logo h1 a, .zoo-head-logo .zn-logo-text { font-size: 24px; }
    .zoo-head-logo .zn-logo-sub { display: none; }
    .zoo-top { flex-direction: column; max-height: unset; }
    .zoo-banner { width: 100%; padding: 25px 15px; }
    .zoo-banner h2 { font-size: 22px; letter-spacing: 2px; margin-bottom: 10px; }
    .zoo-banner p { font-size: 14px; letter-spacing: 1px; }
    .zoo-banner .zn-banner-bgimg { height: 100%; width: auto; }
    /* 手机端排行：初始只露出 3 条（每条约 29px），下拉到底可看全部 10 条 */
    .zoo-rece-item { padding: 5px 0; }
    .zoo-rece-list { max-height: 87px; }
    .zoo-soft-item { width: 33.33%; }
    .zoo-soft-search-box { width: 100%; justify-content: space-around; }
    .seeting-main { width: 100%; }
}
@media (max-width: 576px) {
    .zoo-banner h2 { font-size: 16px; letter-spacing: 1px; margin-bottom: 5px; }
    .zoo-banner p { font-size: 12px; letter-spacing: 1px; }
    .zoo-soft-cat-title { font-size: 17px; padding-left: 19px; }
    .zoo-soft-cat-title::before { width: 8px; height: 8px; margin-top: -4px; }
    .zoo-soft-cat-title.has-ico { padding-left: 25px; }
    .zoo-soft-cat-title .zn-cat-ico { width: 19px; height: 19px; }
    .zoo-soft-cat-desc { display: none; }
    .zoo-soft-cat { margin-top: 12px; }
    .zoo-soft-cat-header { margin-bottom: 6px; }
    .zoo-foot-main { flex-direction: column; gap: 20px; }
    .zoo-detail-head { flex-direction: column; text-align: center; }
    .zoo-detail-meta { justify-content: center; }
    /* 热度排行标题行在窄屏可换行 */
    .zoo-rece-random { top: -8px; }
    .zn-random-sel select { max-width: 92px; }
}

/* ==========================================================================
   列表页（分类 / 标签 / 作者 / 日期）与分页 · 2026-10-02 新增
   ========================================================================== */
.zoo-page .zoo-main { padding-top: 20px; }
/* 独立页面（顶部带公共搜索模块）与首页保持一致：紧贴顶部导航，不留列表页的 20px 留白。
   桌面端 / 手机端统一，见 template/post-page.php、template/page.php 的 zoo-page-flat。 */
.zoo-page.zoo-page-flat .zoo-main { padding-top: 0; }

.zoo-list-head {
    background: rgba(var(--zoo-card-bg-color));
    border-radius: 4px;
    padding: 22px 26px;
    margin-bottom: 16px;
    box-shadow: var(--zoo-shadow);
    position: relative;
    overflow: hidden;
}
.zoo-list-head::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(var(--zoo-color)), rgba(var(--zoo-color), .35));
}
.zoo-list-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.zoo-list-desc {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--zoo-intro-color);
}

.zn-pagebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 0 10px;
}
.zn-pagebar .zn-page {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 4px;
    background: rgba(var(--zoo-card-bg-color));
    color: rgba(var(--zoo-black-color));
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zoo-shadow);
    transition: all .2s ease;
}
.zn-pagebar .zn-page:hover {
    background: rgba(var(--zoo-color));
    color: #fff;
    transform: translateY(-1px);
}
.zn-pagebar .zn-page-now {
    background: rgba(var(--zoo-color));
    color: #fff;
    font-weight: 600;
}

@media (max-width: 768px) {
    .zoo-list-head { padding: 16px 18px; }
    .zoo-list-title { font-size: 18px; }
}

/* ==========================================================================
   v1.1 新增：小飞机 / 今日点击气泡 / 热度排行 / 富详情页 / 友情链接 / 新页脚
   ========================================================================== */

/* ---- 卡片上的小飞机（进详情）：无外框，默认隐藏，悬停卡片才出现 ---- */
.zoo-nav-card { padding-right: 26px; }
.zoo-nav-plane {
    position: absolute; right: 3px; top: 50%; z-index: 3;
    width: 18px; height: 18px;
    border: 0; background: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transform: translateY(-50%) translateX(5px) scale(.82);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.zoo-nav-plane img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zoo-nav-wrap:hover .zoo-nav-plane {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}
/* 手机端与电脑一致：默认隐藏，鼠标悬停（或长按触发 hover）才显示 */
.zoo-nav-edit { right: 26px; }

/* ---- 悬停显示「今日点击」气泡 ---- */
.zoo-nav-tip {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
    z-index: 30; white-space: nowrap; pointer-events: none;
    display: inline-flex; align-items: center; gap: 4px;
    background: #232a35; color: #fff; font-size: 12px; font-weight: 400;
    padding: 6px 10px; border-radius: 8px; line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    opacity: 0; visibility: hidden; transition: all .18s ease;
}
.zoo-nav-tip i { display: inline-flex; font-size: 13px; opacity: .9; }
.zoo-nav-tip b { color: #ff5b5b; font-size: 14px; font-weight: 700; margin: 0 1px; }
.zoo-nav-wrap:hover .zoo-nav-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---- 热度排行里的热度值 ---- */
.zoo-rece-item-time.is-hot { display: inline-flex; align-items: center; gap: 3px; color: rgba(var(--zoo-color)); font-weight: 600; }
.zoo-rece-item-time.is-hot svg { width: 11px; height: 11px; }
.zoo-rece-item-time.is-hot b { font-weight: 700; }

/* ---- 面包屑 ---- */
.zn-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--zoo-text-gray); padding: 14px 2px 0; }
.zn-crumb a { color: var(--zoo-text-gray); display: inline-flex; align-items: center; gap: 4px; }
.zn-crumb a:hover { color: rgba(var(--zoo-color)); }
.zn-crumb svg { width: 14px; height: 14px; }
.zn-crumb i { font-style: normal; opacity: .45; }
.zn-crumb > span { color: rgba(var(--zoo-black-color)); }

/* ---- 详情页头部 ---- */
.zoo-detail-rich .zoo-detail-head { align-items: flex-start; flex-wrap: wrap; gap: 18px; }
.zoo-detail-rich .zoo-detail-icon { border-radius: 12px; }
.zoo-detail-ico-txt { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; font-weight: 800; }
.zn-detail-titlebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zoo-detail-title.is-red { color: #e4393c; }
.zn-detail-badge { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 20px; line-height: 1.6; }
.zn-detail-badge.is-rec { background: linear-gradient(135deg, #ff8a3d, #ff5c00); }
.zn-detail-badge.is-new { background: linear-gradient(135deg, #ff5f6d, #e4393c); }
.zn-detail-badge.is-app { background: rgba(var(--zoo-color)); }
.zoo-detail-sub { color: var(--zoo-intro-color); font-size: 13.5px; margin-top: 8px; line-height: 1.7; }
.zoo-detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
.zoo-detail-meta svg { width: 13px; height: 13px; }
.zn-num { color: rgba(var(--zoo-color)); font-weight: 700; }
.zoo-detail-btns { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.zn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 20px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
    white-space: nowrap; transition: all .2s ease;
}
.zn-btn svg { width: 14px; height: 14px; }
.zn-btn-main { background: rgba(var(--zoo-color)); color: #fff; }
.zn-btn-main:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/* ---- 评价投票（内嵌到详情头部卡片按钮区） ---- */
.zn-vote-inline { display: flex; gap: 8px; }
.zn-vote-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 14px; border-radius: 8px; flex: 1;
    background: rgba(var(--zoo-hover-bg-color)); border: 1px solid var(--zoo-line-color);
    color: rgba(var(--zoo-black-color)); font-size: 12.5px; font-weight: 600; transition: all .2s ease;
    white-space: nowrap;
}
.zn-vote-btn i { display: inline-flex; font-size: 14px; }
.zn-vote-btn b { color: var(--zoo-text-gray); font-weight: 600; }
.zn-vote-btn:hover { border-color: rgba(var(--zoo-color)); color: rgba(var(--zoo-color)); }
.zn-vote-btn.is-active { background: rgba(var(--zoo-color), .1); border-color: rgba(var(--zoo-color)); color: rgba(var(--zoo-color)); }
.zn-vote-btn.is-loading { opacity: .6; pointer-events: none; }
.zoo-detail-btns .zn-vote-tip { font-size: 10.5px; text-align: center; width: 100%; line-height: 1.4; color: var(--zoo-text-gray); margin: 0; }

/* ---- 详情信息卡片 ---- */
.zn-dcard { background: rgba(var(--zoo-card-bg-color)); border-radius: 6px; box-shadow: var(--zoo-shadow); margin-top: 15px; overflow: hidden; }
.zn-dcard-h {
    display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700;
    padding: 15px 22px; border-bottom: 1px solid var(--zoo-line-color);
}
.zn-dcard-h em {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; font-style: normal; font-size: 13px;
    background: rgba(var(--zoo-color), .1); color: rgba(var(--zoo-color));
}
/* 使用主题内置彩色 PNG 图标的标题（图片自带底色，不再画色块底） */
.zn-dcard-h em.has-img { background: none; }
.zn-dcard-h em img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-dcard-body { padding: 18px 22px; font-size: 14px; line-height: 1.85; color: var(--zoo-intro-color); }
.zn-empty-txt { color: var(--zoo-text-gray); }
.zn-info-list li { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; align-items: baseline; flex-wrap: wrap; }
.zn-info-label { color: var(--zoo-text-gray); flex-shrink: 0; }
.zn-info-value { color: rgba(var(--zoo-black-color)); word-break: break-all; }
.zn-info-value > a { color: rgba(var(--zoo-color)); }
.zn-copy-btn {
    margin-left: 8px; font-size: 11.5px; padding: 2px 9px; border-radius: 20px;
    border: 1px solid var(--zoo-line-color); color: var(--zoo-text-gray); transition: all .2s ease;
}
.zn-copy-btn:hover { color: rgba(var(--zoo-color)); border-color: rgba(var(--zoo-color)); }
.zn-copy-btn.is-done { color: #22aa76; border-color: #22aa76; }
.zn-kw {
    font-style: normal; display: inline-block; background: rgba(var(--zoo-hover-bg-color));
    border-radius: 4px; padding: 1px 8px; margin: 0 6px 4px 0; font-size: 12.5px; color: var(--zoo-text-gray);
}
.zn-notice {
    margin-top: 14px; background: rgba(255, 168, 0, .1); border: 1px solid rgba(255, 168, 0, .28);
    border-radius: 6px; padding: 12px 14px; font-size: 12.5px; line-height: 1.8; color: #b47000;
}
html[data-theme="dark"] .zn-notice { color: #f0b95e; }
.zn-notice b { color: inherit; }

/* ---- 相关导航 ---- */
.zn-refresh-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 500; color: var(--zoo-text-gray);
    background: rgba(var(--zoo-hover-bg-color)); border-radius: 20px; padding: 5px 12px; transition: all .2s ease;
}
.zn-refresh-btn svg { width: 13px; height: 13px; }
.zn-refresh-btn:hover { color: rgba(var(--zoo-color)); background: rgba(var(--zoo-color), .1); }
.zn-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.zn-related-card {
    position: relative; display: flex; align-items: center; gap: 8px; overflow: hidden;
    padding: 9px 11px; border-radius: 6px; border: 1px solid var(--zoo-line-color);
    background: rgba(var(--zoo-card-bg-color)); font-size: 13px; font-weight: 600; transition: all .2s ease;
}
.zn-related-card:hover { border-color: rgba(var(--zoo-color)); color: rgba(var(--zoo-color)); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--zoo-color), .18); }
.zn-related-card.is-red .zn-related-name { color: #e4393c; }
.zn-related-icon {
    width: 24px; height: 24px; flex: 0 0 24px; border-radius: 5px; overflow: hidden;
    background: rgba(var(--zoo-color), .08); display: flex; align-items: center; justify-content: center;
}
.zn-related-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-related-txt { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; font-size: 12px; font-weight: 800; color: rgba(var(--zoo-color)); }
.zn-related-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-related-badge { position: absolute; top: 0; right: 0; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 0 6px 0 8px; }
.zn-related-badge.is-rec { background: linear-gradient(135deg, #ff8a3d, #ff5c00); }
.zn-related-badge.is-new { background: linear-gradient(135deg, #ff5f6d, #e4393c); }

/* ---- 评论区 ---- */
.zn-cmt-head { font-size: 13px; color: var(--zoo-text-gray); padding-bottom: 12px; border-bottom: 1px solid var(--zoo-line-color); margin-bottom: 14px; }
.zn-cmt-head b { color: rgba(var(--zoo-color)); }
.zn-cmt { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--zoo-line-color); }
.zn-cmt:last-child { border-bottom: 0; }
.zn-cmt-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    background: rgba(var(--zoo-color), .12); color: rgba(var(--zoo-color));
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.zn-cmt-main { flex: 1; min-width: 0; }
.zn-cmt-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.zn-cmt-name { font-weight: 600; color: rgba(var(--zoo-black-color)); }
.zn-cmt-time, .zn-cmt-reply a { color: var(--zoo-text-gray); }
.zn-cmt-reply a:hover { color: rgba(var(--zoo-color)); }
.zn-cmt-content { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--zoo-intro-color); word-break: break-word; }
.zn-cmt-children { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--zoo-line-color); }
.zn-cmt-form { margin-top: 18px; }
.zn-cmt-form-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.zn-cmt-form-head a { font-size: 12px; font-weight: 400; color: var(--zoo-text-gray); }
.zn-cmt-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.zn-cmt-fields input, .zn-cmt-form textarea {
    background: rgba(var(--zoo-body-bg-color)); border: 1px solid var(--zoo-line-color);
    border-radius: 6px; padding: 9px 12px; font-size: 13.5px; font-family: inherit;
    color: rgba(var(--zoo-black-color)); transition: border-color .2s ease;
}
.zn-cmt-fields input { flex: 1 1 150px; min-width: 0; }
.zn-cmt-form textarea { width: 100%; resize: vertical; line-height: 1.7; }
.zn-cmt-fields input:focus, .zn-cmt-form textarea:focus { border-color: rgba(var(--zoo-color)); }
.zn-cmt-fields .zn-cmt-verify { flex: 0 0 150px; }
.zn-cmt-verify-img { height: 38px; border-radius: 6px; cursor: pointer; border: 1px solid var(--zoo-line-color); }
.zn-cmt-login { font-size: 13px; color: var(--zoo-text-gray); }
.zn-cmt-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.zn-cmt-note { font-size: 12px; color: var(--zoo-text-gray); }
.zn-comment-body .pagebar { margin-top: 12px; }

@media (max-width: 900px) {
    .zn-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .zn-related-grid { grid-template-columns: repeat(2, 1fr); }
    .zoo-detail-rich .zoo-detail-head { padding: 18px; }
    .zoo-detail-btns { flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center; }
    .zoo-detail-btns .zn-btn { flex: 1; }
    .zoo-detail-btns .zn-vote-inline { width: 100%; }
    .zoo-detail-btns .zn-vote-inline .zn-vote-btn { flex: 1; }
    .zn-dcard-body { padding: 16px; }
    .zn-dcard-h { padding: 14px 16px; font-size: 15px; }
    .zoo-foot-card { padding: 26px 18px 0; }
    .zoo-foot-bar { justify-content: center; text-align: center; }
    .zn-friend-box { padding: 10px 11px 12px; }
    .zn-friend-links { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
    .zn-friend-apply { margin-left: 0; }
    .zoo-nav-tip { font-size: 11px; padding: 5px 8px; }
}

/* ==========================================================================
   手机端：导航卡片一行三个（图标在左 · 名称在右 · 角标贴左上角外探）
   —— 放在文件最后，确保能覆盖前面所有卡片规则
   ========================================================================== */
@media (max-width: 576px) {
    .zoo-soft-list { margin: 0 -4px; }
    .zoo-soft-item { width: 33.3333%; }
    .zoo-nav-wrap { margin: 4px; }

    .zoo-nav-card {
        flex-direction: row; justify-content: flex-start; align-items: center;
        gap: 5px; min-height: 38px;
        padding: 6px 15px 6px 6px;
        border-radius: 8px; text-align: left;
        /* 让左上角角标能探出卡片外（参考样式的斜贴角标） */
        overflow: visible;
        box-shadow: none;
    }
    /* 手机端卡片是 overflow:visible，底部色条两端内收，避免戳出圆角 */
    .zoo-nav-card::after { left: 6px; right: 6px; }
    .zoo-nav-icon {
        width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; font-size: 11px;
    }
    .zoo-nav-name {
        width: auto; flex: 1 1 auto; min-width: 0;
        font-size: 10.5px; line-height: 1.2; letter-spacing: 0; text-align: left;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* 角标：贴左上角、探出卡片、轻微倾斜（同参考图） */
    .zoo-nav-badge {
        position: absolute;
        top: -8px; left: -3px; right: auto; z-index: 4;
        border-radius: 6px; font-size: 10px; padding: 2px 6px;
        letter-spacing: 0;
        transform: rotate(-14deg); transform-origin: left bottom;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    }
    /* 小飞机固定右侧垂直居中 */
    .zoo-nav-plane { top: 50%; right: 2px; width: 12px; height: 12px; transform: translateY(-50%); }
    .zoo-nav-wrap:hover .zoo-nav-plane { transform: translateY(-50%); }
    .zoo-nav-edit { top: 50%; right: 18px; transform: translateY(-50%) scale(.7); }
    .zoo-nav-wrap:hover .zoo-nav-edit { transform: translateY(-50%) scale(.8); }
    /* 热度 / APP 标记：改为行内贴右，别浮在名字上 */
    .zoo-nav-hot { position: static; margin-left: auto; font-size: 9px; flex-shrink: 0; }
    .zoo-nav-hot svg { width: 9px; height: 9px; }
    .zoo-nav-app { position: static; font-size: 10px; flex-shrink: 0; }
    /* 悬停气泡在触屏上没有意义 */
    .zoo-nav-tip { display: none; }
}

/* ---- 顶部导航菜单项图标 ---- */
.zoo-head-menu a { display: inline-flex; align-items: center; gap: 0; }
.zoo-head-menu .zn-menu-ico {
    width: 16px; height: 16px; object-fit: contain; display: block; flex-shrink: 0;
    border-radius: 3px; margin-right: 2px;
}
@media (max-width: 768px) {
    .zoo-head-menu div { margin-left: 0; }
    .zoo-head-menu a { padding: 4px 4px; font-size: 12px; }
    .zoo-head-menu .zn-menu-ico { width: 13px; height: 13px; margin-right: 1px; }
}

/* ---- 轻提示 ---- */
#znToast {
    position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
    background: #232a35; color: #fff; font-size: 13px; line-height: 1.5;
    padding: 10px 18px; border-radius: 10px; z-index: 10002; max-width: 82vw;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transition: all .24s ease; pointer-events: none;
}
#znToast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ==========================================================================
   首页搜索模块（横幅 / 热度排行下方）
   ========================================================================== */
.zn-search-mod {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 0;   /* 紧贴顶部导航 */
    padding: 0;
}
.zn-search-wrap { position: relative; flex: 0 1 620px; width: 620px; max-width: 620px; min-width: 0; }

/* ---- 搜索区两侧：日期 / 天气卡片（各占满一侧空白） ---- */
.zn-search-side {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.zn-date-box, .zn-weather-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background-color: rgba(var(--zoo-card-bg-color));
    border: 1px solid rgba(var(--zoo-color), .12);
    border-radius: 12px;
    box-shadow: var(--zoo-shadow);
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* 友情链接同款顶部蓝色渐变条（改为左右流动动效 + 呼吸光晕） */
.zn-date-box::before, .zn-weather-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--zoo-color), .25) 25%, rgba(var(--zoo-color)) 50%, rgba(var(--zoo-color), .25) 75%, transparent 100%);
    background-size: 200% 100%;
    animation: znBarFlow 5s linear infinite, znBarBreath 3.6s ease-in-out infinite;
}
.zn-date-box:hover::before, .zn-weather-box:hover::before {
    animation-duration: 2.5s, 3.6s;   /* hover 时只有流光加速 */
}
.zn-weather-box::before {
    animation-direction: reverse, normal;  /* 天气侧流光反向，更对称 */
}
@keyframes znBarFlow {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* 呼吸：光条亮度 + 外发光缓慢起落（关掉系统「减少动效」也照样播放） */
@keyframes znBarBreath {
    0%, 100% { opacity: .72; box-shadow: 0 0 4px rgba(var(--zoo-color), .28); }
    50%      { opacity: 1;   box-shadow: 0 0 13px rgba(var(--zoo-color), .7); }
}
.zn-date-box:hover, .zn-weather-box:hover {
    border-color: rgba(var(--zoo-color), .28);
    box-shadow: 0 4px 16px rgba(var(--zoo-color), .12);
}
/* 左侧图标（友情链接同款渐变底） */
.zn-side-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, rgba(var(--zoo-color)), rgba(var(--zoo-color), .62));
    box-shadow: 0 3px 9px rgba(var(--zoo-color), .28);
    color: #fff; font-size: 13px; font-style: normal;
    overflow: hidden;
}
.zn-side-ic.has-img { background: none; box-shadow: none; border-radius: 0; }
.zn-side-ic.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-weather-ico { font-size: 13px; line-height: 1; font-style: normal; }
.zn-side-label {
    font-size: 13px; font-weight: 700; color: rgba(var(--zoo-color)); flex-shrink: 0;
}
.zn-date-main, .zn-weather-info {
    display: flex;
    line-height: 1.35;
}
/* 日期 + 星期：同一行显示 */
.zn-date-main {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}
/* 城市 + 天气描述：同一行显示 */
.zn-weather-info {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.zn-date-d, .zn-weather-city {
    font-size: 14px;
    font-weight: 700;
    color: rgba(var(--zoo-black-color));
}
.zn-date-w, .zn-weather-desc {
    font-size: 12px;
    color: var(--zoo-text-gray);
}
.zn-weather-temp {
    font-size: 18px;
    font-weight: 700;
    color: rgba(var(--zoo-color));
    flex-shrink: 0;
}
.zn-weather-city { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-weather-desc { flex-shrink: 0; }
.zn-search-bar {
    display: flex; align-items: center;
    border: 2px solid rgba(var(--zoo-color));
    border-radius: 12px;
    background-color: rgba(var(--zoo-card-bg-color));
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.zn-search-bar:focus-within { box-shadow: 0 4px 16px rgba(var(--zoo-color), .22); }

/* ---- 搜索框内左侧：当前引擎选择按钮 ---- */
.zn-search-cur {
    flex: 0 0 auto; height: 44px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 9px 0 14px;
    cursor: pointer;
    border-right: 1px solid rgba(var(--zoo-black-color), .08);
    transition: background .15s ease;
}
.zn-search-cur:hover { background: rgba(var(--zoo-color), .06); }
.zn-search-cur-ico { display: inline-flex; align-items: center; justify-content: center; }
.zn-search-cur-ico img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; display: block; }
.zn-search-caret { display: inline-flex; font-style: normal; transition: transform .18s ease; }
.zn-search-caret svg { width: 10px; height: 10px; fill: rgba(var(--zoo-black-color), .45); }
.zn-search-cur.open .zn-search-caret { transform: rotate(180deg); }
.zn-search-bar input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 12px 14px;
    font-size: 14px; color: rgba(var(--zoo-black-color));
}
.zn-search-bar input::placeholder { color: rgba(var(--zoo-black-color), .38); }
.zn-search-btn {
    flex: 0 0 48px; width: 48px; height: 44px;
    border: 0; cursor: pointer;
    background: rgba(var(--zoo-color)); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    transition: filter .15s ease;
}
.zn-search-btn:hover { filter: brightness(1.08); }
.zn-search-btn svg { width: 18px; height: 18px; fill: #FFFFFF; }

/* ---- 引擎下拉面板 ---- */
.zn-search-drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background-color: rgba(var(--zoo-card-bg-color));
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .16);
    padding: 12px;
    z-index: 60;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.zn-search-drop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.zn-search-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.zn-search-eng {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 13px; line-height: 1.4;
    color: rgba(var(--zoo-black-color));
    background: rgba(var(--zoo-black-color), .045);
    transition: background .15s ease, color .15s ease;
    overflow: hidden; white-space: nowrap;
}
.zn-search-eng img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: 0 0 18px; }
.zn-search-eng span { overflow: hidden; text-overflow: ellipsis; }
.zn-search-eng:hover { background: rgba(var(--zoo-color), .12); color: rgba(var(--zoo-color)); }
.zn-search-eng.active {
    background: rgba(var(--zoo-color), .14);
    color: rgba(var(--zoo-color)); font-weight: 700;
}
.zn-eng-letter {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; font-style: normal;
    background: rgba(var(--zoo-color), .16); color: rgba(var(--zoo-color));
}
@media (max-width: 768px) {
    .zn-search-mod { padding: 0; gap: 0; }
    .zn-search-side { display: none; }
    .zn-search-wrap { flex: 1; width: auto; max-width: none; }
    .zn-search-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .zn-search-eng { padding: 8px 8px; font-size: 12.5px; }
}
@media (max-width: 576px) {
    .zn-search-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   分类标题右侧按钮（扁平 · 2026-10-08 第四版）
   前几版的问题：胶囊圆角 + inset 高光 + 外发光 + hover 抬升，全是"AI 生成组件"
   的默认配方，怎么调都像 Bootstrap。这一版彻底扁平——
     零阴影 / 零渐变 / 零高光 / 零位移 / 零缩放，只有纯色块和一条 1px 边。
   主次分明：第一个按钮实心主题色，第二个只留描边，避免两块一样重。
   hover 只换色阶（叠一层纯黑，出来的还是纯色），不做任何立体反馈。
   ========================================================================== */
.zn-cat-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zn-cat-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 11px 0 9px; border-radius: 5px;
    border: 1px solid transparent;
    font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: -.005em;
    white-space: nowrap;
    transition: background-color .15s linear, border-color .15s linear, color .15s linear;
}

/* 主按钮：实心主题色 */
.zn-cat-btn-1 {
    background-color: rgba(var(--zoo-color));
    border-color: rgba(var(--zoo-color));
}
/* ⚠️ 四个状态都要把文字色钉死，不能只在基类上写。
   全局有一条 `a:hover { color: rgba(var(--zoo-color)); }`（见文件开头），它的特异性是
   (0,1,1)，比单类选择器 `.zn-cat-btn-1` 的 (0,1,0) 高 —— 只在基类写 color:#fff 的话，
   鼠标一移上去白字就被染成主题蓝，在实心蓝底上直接消失（箭头用 currentColor，会一起消失）。
   这里用 `.zn-cat-btn-1:hover`(0,2,0) 明确压过全局规则。 */
.zn-cat-btn-1,
.zn-cat-btn-1:link,
.zn-cat-btn-1:visited,
.zn-cat-btn-1:hover,
.zn-cat-btn-1:active,
.zn-cat-btn-1:focus { color: #fff; }
.zn-cat-btn-1:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16));
}
.zn-cat-btn-1:active {
    background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3));
}

/* 次按钮：只有一条描边。同样要把 hover 色显式写出（顺带压过全局 a:hover） */
.zn-cat-btn-2,
.zn-cat-btn-2:link,
.zn-cat-btn-2:visited {
    background-color: transparent;
    border-color: rgba(var(--zoo-black-color), .24);
    color: rgba(var(--zoo-black-color));
}
.zn-cat-btn-2:hover {
    border-color: rgba(var(--zoo-color));
    color: rgba(var(--zoo-color));
    background-color: rgba(var(--zoo-color), .08);
}
.zn-cat-btn-2:active {
    border-color: rgba(var(--zoo-color));
    color: rgba(var(--zoo-color));
    background-color: rgba(var(--zoo-color), .16);
}

.zn-cat-btn:focus-visible { outline: 2px solid rgba(var(--zoo-color), .6); outline-offset: 2px; }

/* 没配图标时的小圆点 */
.zn-cat-btn i {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; margin-left: 3px;
    background: currentColor; opacity: .75;
}
.zn-cat-btn-2 i { background: #F59A23; opacity: 1; }

/* 图标：扁平就别描边了，直接给一块实底小方块把 logo 托起来 */
.zn-cat-btn img {
    box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 18px; padding: 2px;
    object-fit: contain; border-radius: 3px; background: rgba(255, 255, 255, .92);
}
.zn-cat-btn-2 img { background: rgba(var(--zoo-black-color), .07); }

/* 细描边箭头（currentColor 自动跟随） */
.zn-cat-btn::after {
    content: ''; position: relative;
    width: 4px; height: 4px; flex: 0 0 auto; margin: -1px 0 0 1px;
    border-top: 1.25px solid currentColor; border-right: 1.25px solid currentColor;
    border-radius: .5px; transform: rotate(45deg); opacity: .5;
    transition: transform .15s linear, opacity .15s linear;
}
.zn-cat-btn:hover::after { transform: rotate(45deg) translate(1px, -1px); opacity: .95; }

/* 夜间：实心蓝在深底上依然成立，不用反相；次按钮描边换成浅色 */
html[data-theme="dark"] .zn-cat-btn-2 {
    border-color: rgba(255, 255, 255, .26);
    color: rgba(var(--zoo-black-color));
}
html[data-theme="dark"] .zn-cat-btn-2:hover {
    border-color: rgba(var(--zoo-color));
    color: rgba(var(--zoo-color));
    background-color: rgba(var(--zoo-color), .16);
}
html[data-theme="dark"] .zn-cat-btn-2:active { background-color: rgba(var(--zoo-color), .26); }
html[data-theme="dark"] .zn-cat-btn-2 img { background: rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
    .zn-cat-btn, .zn-cat-btn::after { transition: none; }
    .zn-cat-btn:hover::after { transform: rotate(45deg); }
}
@media (max-width: 768px) {
    .zoo-soft-cat-header { flex-wrap: wrap; }
    .zn-cat-btns { gap: 5px; }
    .zn-cat-btn { height: 26px; padding: 0 9px 0 7px; font-size: 12px; gap: 5px; }
    .zn-cat-btn img { width: 16px; height: 16px; flex: 0 0 16px; }
}

/* ---- 前台设置面板：右上角关闭按钮 ---- */
.zn-setting-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(var(--zoo-black-color), .06); color: rgba(var(--zoo-black-color), .65);
    font-size: 14px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.zn-setting-close:hover {
    background: rgba(var(--zoo-color), .14); color: rgba(var(--zoo-color));
    transform: rotate(90deg);
}

/* ==========================================================================
   手机端页脚底部栏修复（2026-10-08）
   原因：.zoo-foot-copy / .zoo-foot-links 是 flex + flex-wrap，窄屏被压满整行后换行，
   而它们默认 justify-content: flex-start，于是版权那几行在居中的卡片里齐刷刷左对齐、
   行距一宽一窄，看着很乱。这里改成「上下两组 + 组内居中 + 统一行距」。
   v1.5.3：再让「本站由 XX 提供云计算服务」整条单独占一行（display:block），
   避免它接在版权后面被折成两截。桌面端一律不受影响。
   ——写在文件最后，确保能覆盖前面的所有页脚规则。
   ========================================================================== */
@media (max-width: 768px) {
    .zoo-foot-card { padding: 24px 16px 0; }
    .zoo-foot-bar {
        flex-direction: column; align-items: center; gap: 6px;
        margin-top: 22px; padding: 14px 0 16px; text-align: center;
    }
    /* 第一组：© 年份 站名 · 签名 · 版权 · 云服务 —— 当普通行内文字排，自动折行且居中 */
    .zoo-foot-copy {
        display: block; width: 100%;
        font-size: 12.5px; line-height: 2;
    }
    .zoo-foot-copy em { display: inline; opacity: .8; }
    /* 行内分隔点，避免几个短句挤成一坨（云服务已另起一行，不再需要点） */
    .zoo-foot-copy span + em::before,
    .zoo-foot-copy em + em::before {
        content: '·'; margin: 0 6px; opacity: .45;
    }
    /* 「本站由 XX 提供云计算服务」手机端强制单独一行居中，
       否则会接在版权后面被折成两截（「…简约但不简单 · 本站由」+「触摸云 提供云计算服务」） */
    .zoo-foot-cloud { display: block; margin-top: 1px; }
    /* 第二组：备案号 + Powered by */
    .zoo-foot-links {
        justify-content: center; width: 100%;
        gap: 4px 12px; line-height: 2;
    }
}
@media (max-width: 400px) {
    .zoo-foot-copy { font-size: 12px; }
    .zoo-foot-cloud-ico { height: 14px; }
}

/* ==========================================================================
   底部悬浮条（v1.6）
   —— 底部一条自定义悬浮卡片（图标 + 标题 + 副标题 + 任意个自定义按钮），
      滚到页脚区域自动「丝滑」收起成左下角小图标；点小图标可再次展开；
      点 ✕ 关闭后按设定时长只留小图标（localStorage 记忆，含刷新）。
   —— 过渡统一用 cubic-bezier(.22,.61,.36,1)（收起）/ (.34,1.56,.64,1)（弹出带回弹）。
   ========================================================================== */
.zn-float {
    position: fixed; left: 50%; bottom: 26px; z-index: 9990;
    width: min(660px, calc(100% - 40px));
    display: flex; align-items: center; gap: 16px;
    padding: 14px 46px 14px 20px;
    background: rgba(var(--zoo-card-bg-color));
    border: 1px solid var(--zoo-line-color);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(28, 45, 80, .16), 0 2px 10px rgba(28, 45, 80, .06);
    color: rgba(var(--zoo-black-color));
    opacity: 1; transform: translate(-50%, 0) scale(1);
    transition: opacity .42s cubic-bezier(.22, .61, .36, 1),
                transform .42s cubic-bezier(.22, .61, .36, 1),
                box-shadow .3s ease;
    will-change: opacity, transform;
}
html[data-theme="dark"] .zn-float { box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3); }
.zn-float:hover { box-shadow: 0 20px 48px rgba(28, 45, 80, .2), 0 2px 10px rgba(28, 45, 80, .07); }
/* 收起态（往下沉 + 缩一点 + 淡出，比直接消失更丝滑） */
.zn-float.zn-hide {
    opacity: 0; pointer-events: none;
    transform: translate(-50%, 26px) scale(.9);
}
/* 滑动页面时临时隐没 */
.zn-float.zn-scroll-hide { opacity: 0; pointer-events: none; }

.zn-float-logo {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 0; overflow: visible;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--zoo-color), .1);
    border: 1px solid var(--zoo-line-color);
}
.zn-float-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-float-logo svg { width: 26px; height: 26px; color: rgba(var(--zoo-color)); }
/* 上传了自己的图标：不要圆角、不要描边底色、不裁切 —— 原图什么样就什么样，完整显示 */
.zn-float-logo.zn-has-img {
    background: none; border: none; border-radius: 0; overflow: visible;
}

.zn-float-inner {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    text-decoration: none; color: inherit;
}
.zn-float-title {
    font-size: 19px; font-weight: 800; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zn-float-title::after {
    content: '\279C'; font-weight: 400; font-size: 16px; margin-left: 2px;
    opacity: 0; transition: opacity .25s ease, margin-left .25s ease;
}
.zn-float-inner:hover .zn-float-title::after { opacity: 1; margin-left: 8px; }
.zn-float-desc {
    font-size: 13px; line-height: 1.5; color: var(--zoo-text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.zn-float-btns { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.zn-float-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 19px; border-radius: 999px; white-space: nowrap;
    font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
    color: rgba(var(--zoo-color));
    background: rgba(var(--zoo-color), .12);
    border: 1px solid rgba(var(--zoo-color), .22);
    transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.zn-float-btn:hover {
    background: rgba(var(--zoo-color), .2);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--zoo-color), .22);
}
/* 最后一个按钮做成实心主按钮（一个轻一个重，层次更清楚） */
.zn-float-btn:last-child {
    color: #fff;
    background: rgba(var(--zoo-color));
    border-color: rgba(var(--zoo-color));
}
.zn-float-btn:last-child:hover {
    background: rgba(var(--zoo-color), .88);
    box-shadow: 0 8px 20px rgba(var(--zoo-color), .34);
}
.zn-float-btn-plain { cursor: default; }
.zn-float-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.zn-float-btn-ico {
    width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex: 0 0 auto;
}
.zn-float-btn-fb { display: inline-flex; align-items: center; }

.zn-float-close {
    position: absolute; right: 8px; top: 8px;
    width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1;
    background: rgba(var(--zoo-black-color), .08); color: rgba(var(--zoo-black-color), .6);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.zn-float-close i { font-style: normal; font-size: 12px; font-weight: 700; }
.zn-float-close:hover { background: rgba(var(--zoo-color), .16); color: rgba(var(--zoo-color)); }
.zn-float-close:active { transform: scale(.9); }

/* ---- 收起后的左下角小图标 ---- */
.zn-float-mini {
    position: fixed; bottom: 26px; z-index: 9990;
    width: 56px; height: 56px; border-radius: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: rgba(var(--zoo-card-bg-color));
    border: 1px solid var(--zoo-line-color);
    box-shadow: 0 10px 26px rgba(28, 45, 80, .22), 0 2px 8px rgba(28, 45, 80, .1);
    opacity: 0; pointer-events: none;
    transform: scale(.45) translateY(12px);
    transition: opacity .36s cubic-bezier(.22, .61, .36, 1),
                transform .5s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .25s ease;
    will-change: opacity, transform;
}
/* 图标是上传的图片时：方角 + 不描边，整块只靠投影浮在页面上 */
.zn-float-mini.zn-has-img { border: none; }
.zn-mini-left  { left: 26px; }
.zn-mini-right { right: 24px; bottom: 20px; }
.zn-float-mini.zn-show { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); }
.zn-float-mini.zn-show:hover { transform: scale(1.08) translateY(0); box-shadow: 0 14px 30px rgba(28, 45, 80, .28); }
.zn-float-mini.zn-scroll-hide { opacity: 0; pointer-events: none; }
.zn-float-mini-in {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--zoo-color), .1);
}
.zn-float-mini-in img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zn-float-mini-in svg { width: 26px; height: 26px; color: rgba(var(--zoo-color)); }
.zn-float-mini.zn-has-img .zn-float-mini-in { background: none; }

/* 前台搜索条 / 设置面板打开时让位，避免叠在一起 */
body.zn-search-open .zn-float,
body.zn-search-open .zn-float-mini,
body.zn-setting-open .zn-float,
body.zn-setting-open .zn-float-mini { opacity: 0; pointer-events: none; }

/* 平板 */
@media (max-width: 1023px) {
    .zn-float {
        width: calc(100% - 40px); gap: 14px;
        padding: 13px 42px 13px 18px;
    }
    .zn-float-title { font-size: 17px; }
    .zn-float-btn { padding: 9px 16px; font-size: 13px; }
}

/* 手机端：标题区一行、按钮整行平分 */
@media (max-width: 767px) {
    .zn-float {
        left: 12px; right: 12px; bottom: 12px;
        width: auto; transform: none;
        flex-wrap: wrap; gap: 0;
        padding: 13px 40px 14px 14px;
        border-radius: 16px;
    }
    .zn-float.zn-hide { transform: translateY(24px) scale(.94); }
    .zn-float-logo { width: 46px; height: 46px; border-radius: 0; margin-right: 12px; }
    .zn-float-title { font-size: 16px; }
    .zn-float-title::after { display: none; }
    .zn-float-desc { font-size: 12px; }
    .zn-float-btns { flex: 1 1 100%; margin-top: 12px; gap: 9px; }
    .zn-float-btn { flex: 1 1 0; padding: 11px 8px; }
    .zn-mini-left  { left: 12px;  bottom: 12px; }
    .zn-mini-right { right: 12px; bottom: 12px; }
    .zn-float-mini { width: 52px; height: 52px; border-radius: 0; }
    /* 手机端滑动页面时隐没，停下后自动回来（电脑端不做这个，避免晃动感） */
    .zn-float.zn-scroll-hide,
    .zn-float-mini.zn-scroll-hide { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zn-float, .zn-float-mini { transition-duration: .01ms; }
}

/* ==========================================================================
   省钱助手（v1.8）：首页三栏彩色模块 + 深蓝二维码弹窗 + 独立单页
   ========================================================================== */

/* ---------- 首页：模块头 ---------- */
.zn-sq-home { margin: 28px 0 10px; }
.zn-sq-home-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.zn-sq-home-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 20px; font-weight: 700; color: rgba(var(--zoo-black-color));
}
/* 标题前的小图标（后台可上传，留空不输出） */
.zn-sq-title-ico {
    flex: 0 0 auto; display: block; width: 26px; height: 26px; object-fit: contain;
}
/* 小蓝色斜角徽章（仿目标站「每天帮你省一点」） */
.zn-sq-into {
    position: relative; font-size: 13px; color: #fff2a2; line-height: 25px;
    padding: 0 10px; z-index: 1;
}
.zn-sq-into::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%;
    transform: skewX(-5deg); border-radius: 5px; background: #283593; z-index: -1;
}
.zn-sq-into::before {
    content: ''; position: absolute; left: -2px; top: 3px; height: 15px; width: 15px;
    display: inline-block; background: #283593; border-radius: 2px;
    transform: rotate(45deg) skewX(-5deg); z-index: -1;
}

/* ---------- 首页：三栏彩色面板 ---------- */
.zn-sq-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zn-sq-g { border-radius: 14px; padding: 18px 16px 16px; min-width: 0; }
.zn-sq-g-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.zn-sq-g-head strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「更多优惠券」小黑徽章 */
.zn-sq-g-more {
    flex: 0 0 auto; font-size: 12px; background: rgba(0, 0, 0, .35); color: #fff;
    border-radius: 7px 7px 7px 0; padding: 3px 6px 2px 8px; font-weight: 700;
}
.zn-sq-g-more:hover { background: rgba(0, 0, 0, .5); color: #fff; }

/* 六种配色（金色取自目标站 golden 面板） */
.zn-sq-g-yellow { background: linear-gradient(to right bottom, #fff4d1 0%, #d7ca8a 100%); }
.zn-sq-g-yellow .zn-sq-g-head strong { color: #6a3f00; }
.zn-sq-g-green { background: linear-gradient(to right bottom, #eefad6 0%, #adde9e 100%); }
.zn-sq-g-green .zn-sq-g-head strong { color: #007100; }
.zn-sq-g-blue { background: linear-gradient(to right bottom, #eaf8ff 0%, #c2dcf2 100%); }
.zn-sq-g-blue .zn-sq-g-head strong { color: #283593; }
.zn-sq-g-purple { background: linear-gradient(to right bottom, #f3eaff 0%, #cbb8ee 100%); }
.zn-sq-g-purple .zn-sq-g-head strong { color: #5b2e91; }
.zn-sq-g-red { background: linear-gradient(to right bottom, #ffeaea 0%, #f2c2c2 100%); }
.zn-sq-g-red .zn-sq-g-head strong { color: #b02121; }
.zn-sq-g-teal { background: linear-gradient(to right bottom, #e6fbfa 0%, #b2e8e4 100%); }
.zn-sq-g-teal .zn-sq-g-head strong { color: #00707a; }

/* 面板里的白色条目行（图标 + 名称 + 说明 + 箭头）
   一行一个：三栏布局下每栏只有 300 多 px，两列会把名称挤成「美…」 */
.zn-sq-g-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.zn-sq-link {
    display: flex; align-items: center; padding: 8px 12px; max-width: 100%;
    background: #fff; border-radius: 8px; font-size: 14px; color: rgba(0, 0, 0, .85);
    overflow: hidden; min-width: 0;
}
.zn-sq-link:hover { color: #283593; }
.zn-sq-link-ico {
    flex: 0 0 auto; width: 16px; height: 16px; margin-right: 7px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.zn-sq-link-ico img { width: 16px; height: 16px; object-fit: cover; border-radius: 3px; }
.zn-sq-link-ico em {
    width: 16px; height: 16px; border-radius: 3px; background: rgba(var(--zoo-color), .12);
    color: rgba(var(--zoo-color)); font-size: 11px; font-weight: 700; font-style: normal;
    display: flex; align-items: center; justify-content: center;
}
.zn-sq-link strong {
    flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 说明：跟随目标站「右浮动、空间不够自己缩」，不再抢 45% 固定宽度 */
.zn-sq-link-desc {
    flex: 0 1 auto; min-width: 0; font-size: 12px; color: #999; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin-left: auto;
}
.zn-sq-link-arrow { flex: 0 0 auto; margin-left: 3px; opacity: .3; }
.zn-sq-link-arrow svg { width: 11px; height: 11px; display: block; }

/* 夜间：面板换深色渐变、条目行改半透明 */
html[data-theme="dark"] .zn-sq-g-yellow { background: linear-gradient(to right bottom, #4a3d1e 0%, #33290f 100%); }
html[data-theme="dark"] .zn-sq-g-yellow .zn-sq-g-head strong { color: #e8cf8a; }
html[data-theme="dark"] .zn-sq-g-green { background: linear-gradient(to right bottom, #2c4a24 0%, #1f3519 100%); }
html[data-theme="dark"] .zn-sq-g-green .zn-sq-g-head strong { color: #a8d99a; }
html[data-theme="dark"] .zn-sq-g-blue { background: linear-gradient(to right bottom, #22315c 0%, #1a2547 100%); }
html[data-theme="dark"] .zn-sq-g-blue .zn-sq-g-head strong { color: #9db8f0; }
html[data-theme="dark"] .zn-sq-g-purple { background: linear-gradient(to right bottom, #3a2c55 0%, #291f3d 100%); }
html[data-theme="dark"] .zn-sq-g-purple .zn-sq-g-head strong { color: #c3aef0; }
html[data-theme="dark"] .zn-sq-g-red { background: linear-gradient(to right bottom, #4a2424 0%, #351919 100%); }
html[data-theme="dark"] .zn-sq-g-red .zn-sq-g-head strong { color: #f0b8b8; }
html[data-theme="dark"] .zn-sq-g-teal { background: linear-gradient(to right bottom, #1d4441 0%, #143030 100%); }
html[data-theme="dark"] .zn-sq-g-teal .zn-sq-g-head strong { color: #9adcd6; }
html[data-theme="dark"] .zn-sq-link { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .92); }
html[data-theme="dark"] .zn-sq-link:hover { color: #fff; }
html[data-theme="dark"] .zn-sq-link strong { color: rgba(255, 255, 255, .92); }
html[data-theme="dark"] .zn-sq-link:hover strong { color: #fff; }
html[data-theme="dark"] .zn-sq-link-desc { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .zn-sq-link-ico em { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- 深蓝二维码弹窗（首页 + 单页共用） ---------- */
.zn-sq-win {
    position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    /* 不用 backdrop-filter：它要对背后整页做实时高斯模糊，每帧重算，打开时会明显卡顿 */
    background: rgba(10, 14, 45, .45);
    opacity: 0; visibility: hidden;
    /* 关闭时等淡出走完再隐藏；打开时立刻可见（打开这一步不参与过渡，少一帧计算） */
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.zn-sq-win.zn-show { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
body.zn-sq-lock { overflow: hidden; }
.zn-sq-win-body {
    width: 330px; max-width: 92%; padding: 10px;
    /* 只用位移，不用 scale：缩放会让弹窗内所有文字重新栅格化，观感就是“卡一下” */
    transform: translate3d(0, 12px, 0); will-change: transform;
    transition: transform .22s cubic-bezier(.22, .8, .3, 1);
}
.zn-sq-win.zn-show .zn-sq-win-body { transform: translate3d(0, 0, 0); }
.zn-sq-win-bg { position: relative; background: #283593; padding: 20px 10px 10px; border-radius: 18px; }
.zn-sq-win-close {
    position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; z-index: 2;
    border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 15px;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.zn-sq-win-close:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.zn-sq-win-title { font-size: 20px; color: #ebb50a; text-align: center; padding: 0 0 15px; font-weight: 700; }
/* 标签条：同一个优惠有多个二维码时出现（仿目标站「外卖节 / 惊喜红包 / 超值券包」） */
.zn-sq-win-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
    padding: 3px; margin: -6px 2px 12px; border-radius: 14px; background: #121b56;
}
.zn-sq-tab {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 700; line-height: 24px;
    padding: 0 10px; border-radius: 11px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; transition: background .2s ease, color .2s ease;
}
.zn-sq-tab:hover { color: #fff; }
.zn-sq-tab.active { background: #fff; color: #283593; }
.zn-sq-win-main { background: #fff; padding: 30px; border-radius: 10px; }
.zn-sq-win-img { position: relative; display: flex; justify-content: center; align-items: center; padding: 10px; }
/* 二维码层：固定 1:1 高度，图片没解码完也不会让弹窗高度跳一下 */
.zn-sq-win-shot { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.zn-sq-win-shot img {
    width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: none;
}
.zn-sq-win-shot img.is-on { display: block; animation: znSqQrIn .16s ease both; }
@keyframes znSqQrIn { from { opacity: .4; } to { opacity: 1; } }
/* 二维码还没上传时的占位（后台配了标签页但没传图，前台不至于空一块） */
.zn-sq-qr-empty {
    display: flex; width: 100%; aspect-ratio: 1 / 1; align-items: center; justify-content: center;
    border: 1px dashed #c9d2e6; border-radius: 8px; color: #9aa7bd; font-size: 13px;
}
/* 二维码中心的小 logo */
.zn-sq-qr-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 16%; aspect-ratio: 1 / 1; background: #fff; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-weight: 700; color: #283593; font-size: 14px;
}
.zn-sq-qr-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* 说明区：上缘虚线 + 两端半圆缺口（仿目标站） */
.zn-sq-win-content {
    position: relative; line-height: 1.7; margin: 20px -30px -30px; padding: 20px 25px;
    border-top: 1px dashed #283593; font-size: 13px; color: rgba(0, 0, 0, .85);
}
.zn-sq-win-content::before, .zn-sq-win-content::after { content: ''; position: absolute; height: 16px; width: 8px; }
.zn-sq-win-content::after { right: 0; top: -8px; background: #283593; border-radius: 50px 0 0 50px; box-shadow: inset 1px 0 1px 1px #2c346d; }
.zn-sq-win-content::before { left: 0; top: -8px; background: #283593; border-radius: 0 50px 50px 0; box-shadow: inset -1px 0 1px 1px #2c346d; }
.zn-sq-hl { background: linear-gradient(transparent 62%, #b7ffb0 62%); }
.zn-sq-win-btnrow { margin: 12px 0 0; }
.zn-sq-win-btn {
    display: block; text-align: center; padding: 12px 20px; background: #22c55e; color: #fff;
    border-radius: 8px; font-size: 15px; font-weight: 600; transition: background .2s ease;
}
.zn-sq-win-btn:hover { background: #16a34a; color: #fff !important; }

/* ---------- 省钱助手独立单页（入口：主题目录 shengqian.php） ---------- */
.zn-sqpage-header { margin: 18px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--zoo-line-color); }
.zn-sqpage-titlerow { display: flex; align-items: center; gap: 10px; }
.zn-sqpage-h1 { font-size: 26px; font-weight: 700; color: rgba(var(--zoo-black-color)); line-height: 1.3; }
.zn-sq-title-ico-lg { width: 34px; height: 34px; }
.zn-sqpage-sub { font-size: 13px; color: var(--zoo-text-gray); margin: 6px 0 0; line-height: 1.5; }
.zn-sqpage-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; margin-bottom: 40px; }
.zn-sqpage-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 16px 8px 14px; min-width: 0;
    background: linear-gradient(180deg, rgba(var(--zoo-hover-bg-color)) 0%, rgba(var(--zoo-card-bg-color)) 100%);
    border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease;
}
.zn-sqpage-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); color: rgba(var(--zoo-black-color)); }
.zn-sqpage-card:active { transform: translateY(-1px); }
.zn-sqpage-icon {
    position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
    background: rgba(var(--zoo-card-bg-color)); box-shadow: var(--zoo-shadow);
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex: 0 0 auto;
}
.zn-sqpage-icon img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.zn-sqpage-icon em {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 600; font-style: normal; color: var(--zoo-text-gray);
    background: rgba(var(--zoo-hover-bg-color));
}
.zn-sqpage-name {
    width: 100%; font-size: 14px; font-weight: 700; color: rgba(var(--zoo-black-color));
    line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.zn-sqpage-desc {
    width: 100%; font-size: 12px; color: var(--zoo-text-gray); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"] .zn-sqpage-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) and (min-width: 1025px) {
    .zn-sqpage-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1024px) {
    .zn-sqpage-grid { grid-template-columns: repeat(4, 1fr); }
    .zn-sq-home-grid { grid-template-columns: 1fr; }
    .zn-sq-g-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .zn-sqpage-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .zn-sq-g { padding: 14px 12px 12px; }
    .zn-sq-g-list { grid-template-columns: 1fr; gap: 8px; }
    .zn-sq-link { padding: 8px 10px; }
    /* 一行一个之后宽度够了，手机上也能显示说明文字（空间不足时它自己会缩） */
    .zn-sqpage-h1 { font-size: 22px; }
    .zn-sq-title-ico { width: 22px; height: 22px; }
    .zn-sq-title-ico-lg { width: 28px; height: 28px; }
    .zn-sqpage-titlerow { gap: 8px; }
}
@media (max-width: 480px) {
    .zn-sq-win-body { width: 340px; }
    .zn-sq-win-main { padding: 22px; }
    .zn-sq-win-content { margin: 16px -22px -22px; padding: 16px 18px; }
    .zn-sq-win-title { font-size: 18px; }
    .zn-sq-tab { font-size: 11.5px; padding: 0 7px; }
}