@charset "utf-8";
/* =========================================================================
   WX导航模板（daott 风格） - 扁平绿 / 图标墙
   ========================================================================= */

:root {
    --wx-primary: #16a34a;
    --wx-primary-2: color-mix(in srgb, var(--wx-primary) 72%, #ffffff);
    --wx-primary-soft: color-mix(in srgb, var(--wx-primary) 12%, transparent);
    --wx-primary-line: color-mix(in srgb, var(--wx-primary) 28%, transparent);
    --wx-tab-active: #f43f5d;   /* 子分类胶囊容器里的激活色（玫红），区别于主品牌绿 */

    --wx-bg: #f5f7f6;
    --wx-surface: #ffffff;
    --wx-surface-2: #f0f3f1;
    --wx-border: #e4e9e6;
    --wx-text: #1f2328;
    --wx-text-2: #6b7280;

    --wx-radius: 14px;
    --wx-radius-sm: 10px;
    --wx-radius-pill: 999px;

    --wx-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 4px 14px rgba(16, 24, 20, 0.06);
    --wx-shadow-hover: 0 6px 22px rgba(22, 163, 74, 0.16);

    --wx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --wx-topbar-h: 60px;
}

.dark {
    --wx-bg: #0f1411;
    --wx-surface: #181d19;
    --wx-surface-2: #1f2521;
    --wx-border: #2a312b;
    --wx-text: #e8eee9;
    --wx-text-2: #98a292;
    --wx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.36);
    --wx-shadow-hover: 0 6px 22px rgba(22, 163, 74, 0.22);
    --wx-tab-active: #fb7185;   /* 暗色下玫红提亮，保证可读 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 内联 SVG 图标（symbol 雪碧图）基础样式 */
.wx-ico {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex: none;
    display: inline-block;
    stroke-width: 1.8;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--wx-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wx-text);
    background: var(--wx-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* ------------------------------------------------------------------ 顶栏（整体固定：公告条 + 主头部，由 .site-header 包裹） */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wx-bg);
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--wx-primary), var(--wx-primary-2));
    color: #fff; font-weight: 700; font-size: 16px;
}
.brand-name { font-size: 17px; font-weight: 700; white-space: nowrap; }

/* 快捷菜单（大图标+文字垂直方块，对齐 daott 顶栏右侧） */
.quick-menu { display: flex; align-items: center; gap: 6px; flex: none; }
.quick-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    padding: 7px 4px;
    border-radius: 8px;
    color: var(--wx-text-2);
    font-size: 11px;
    line-height: 1.1;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.quick-item:hover { background: var(--wx-primary-soft); color: var(--wx-primary); border-color: var(--wx-primary-line); transform: translateY(-1px); }
.quick-item i { font-size: 18px; }

/* ------------------------------------------------------------------ 主体 */
.nav-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 18px 40px;
}

/* 广告位（顶部/分类间/底部/详情页，内容为后台粘贴的广告 HTML，居中不限定尺寸） */
.nav-ad {
    margin: 14px 0;
    text-align: center;
}
.nav-ad--top { margin-top: 4px; }
.nav-ad--mid { margin: 26px 0; }
.nav-ad--bottom { margin-top: 30px; }
.nav-ad img { max-width: 100%; border-radius: var(--wx-radius-sm); }

/* 区块 */
.nav-section { margin-top: 28px; }
.nav-sec-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
}
/* 区块标题（父分类标题 + 摘要） */
.nav-sec-title {
    gap: 10px;
    margin-bottom: 0;
    font-size: 20px;
}
.nav-sec-title > i, .nav-sec-title .wx-ico { font-size: 22px; }
.nav-sec-title .wx-fallback-letter { color: var(--wx-primary); font-weight: 700; font-size: 22px; }
.nav-sec-title img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }

/* 右侧：分类摘要 */
.nav-sec-sub { font-size: 12px; font-weight: 400; color: var(--wx-text-2); margin-left: auto; }
/* 长分类名不换行，超出用省略号（.nav-sec-title 是 flex 容器，需 min-width:0 才能收缩） */
.nav-sec-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 子分类 / 父分类 tab（首个为父分类=全部）
   外层 .sub-tabs 是一个圆角胶囊容器（浅灰），里面所有 .sub-tab 紧贴排列；
   激活项独立一个玫红实心胶囊 + 白字，非激活项透出容器底色。 */
.sub-tabs {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: var(--wx-radius-pill);
    background: var(--wx-surface-2);
    width: fit-content;
    max-width: 100%;
}
/* 滑动高亮块：绝对定位，跟随激活按钮，带平滑过渡 */
.sub-tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--wx-radius-pill);
    background: var(--wx-tab-active);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--wx-tab-active) 38%, transparent);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}
.sub-tab {
    position: relative;
    z-index: 1;
    padding: 6px 16px;
    border-radius: var(--wx-radius-pill);
    background: transparent;
    border: 0;
    color: var(--wx-text-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.18s;
}
.sub-tab:hover { color: var(--wx-text); }
.sub-tab.is-active {
    color: #fff;
}

/* ------------------------------------------------------------------ 图标墙卡片 */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}
/* 带侧栏的双栏容器（分类/搜索等）内，默认图标墙收窄为 6 列，避免单个卡片过挤；
   不影响首页单栏的 8 列，也不影响「同类推荐(4列)/标签(6列)」等专用网格 */
.wx-layout-main .nav-grid:not(.is-col-4):not(.is-col-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
    .wx-layout-main .nav-grid:not(.is-col-4):not(.is-col-6) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .wx-layout-main .nav-grid:not(.is-col-4):not(.is-col-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .wx-layout-main .nav-grid:not(.is-col-4):not(.is-col-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 文章页「同类推荐」专用：每行 4 个，两端对齐整齐两行 */
.nav-grid.is-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
    .nav-grid.is-col-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nav-grid.is-col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 标签页文章网格：每行 6 个（有侧栏时自适应） */
.nav-grid.is-col-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
    .nav-grid.is-col-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nav-grid.is-col-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .nav-grid.is-col-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nav-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 8px;
    box-shadow: var(--wx-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wx-shadow-hover);
    border-color: var(--wx-primary-line);
    background: var(--wx-primary-soft);
}
.nav-card.is-died { opacity: 0.55; }

.nav-card-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 10px;
    overflow: hidden;
}
.nav-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    flex: none;
    border-radius: 5px;
    background: var(--wx-surface-2);
    overflow: hidden;
}
.nav-card-ico img { width: 100%; height: 100%; object-fit: contain; }
.nav-card-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--wx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-card-go {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    margin-right: 7px;
    flex: none;
    border-radius: 5px;
    color: var(--wx-text-2);
    font-size: 11px;
    transition: background 0.18s, color 0.18s;
}
.nav-card:hover .nav-card-go {
    display: inline-flex;
}
.nav-card-go::before { content: "\2197"; font-weight: 700; }
.nav-card-go:hover { background: var(--wx-primary); color: #fff; }

/* 角标 */
.nav-badge {
    position: absolute;
    top: -6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 4px;
    color: #fff;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.nav-badge.pos-left  {left: -6px;right: auto;}
.nav-badge.pos-right { right: -6px; left: auto; }
.nav-badge.is-rec    { background: #ef4444; }  /* 推荐 红 */
.nav-badge.is-new    { background: #22c55e; }  /* 最新 绿 */
.nav-badge.is-app    { background: #3b82f6; }  /* APP 蓝 */
.nav-badge.is-soft   { background: #f59e0b; }  /* 软件 橙 */
.nav-badge.is-custom { background: var(--wx-primary); }
/* 置顶标（有效置顶才显示；付费置顶到期后自动消失） */
.nav-top-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 4;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #f59e0b);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(244, 63, 94, 0.35);
    pointer-events: none;
}
.nav-died {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    padding: 1px 6px;
    font-size: 10px;
    color: #fff;
    background: #9ca3af;
    border-radius: 4px;
    flex: none;
}

/* ------------------------------------------------------------------ 空状态 */
.nav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 60px 20px;
    color: var(--wx-text-2);
    text-align: center;
}
.nav-empty-icon .wx-ico { font-size: 48px; opacity: 0.35; margin-bottom: 4px; }
.nav-empty-code { font-size: 72px; font-weight: 800; color: var(--wx-border); line-height: 1; margin: 0; }
.nav-empty-text { font-size: 20px; font-weight: 700; color: var(--wx-text); margin: 4px 0 0; }
.nav-empty-desc { font-size: 14px; color: var(--wx-text-2); margin: 0 0 16px; }
.nav-empty--full { min-height: 55vh; }
.nav-empty { grid-column: 1 / -1; }
.back-home {
    padding: 8px 18px; border-radius: var(--wx-radius-pill);
    background: var(--wx-primary); color: #fff; font-size: 13px; font-weight: 600;
}

/* ------------- 双栏布局（侧栏）+ 侧栏模块样式 ------------- */
.wx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 24px;
    align-items: start;
}
.wx-layout-main { min-width: 0; }
.wx-layout-side { min-width: 0; }

/* ------------- 左侧竖向导航（首页分类锚点 / 内页收藏夹 divFavorites） ------------- */
.nav-side {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.wx-side-nav {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 14px;
    box-shadow: var(--wx-shadow);
    max-height: calc(100vh - var(--wx-header-h, 76px) - 24px);
    overflow-y: auto;
}
.wx-side-nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wx-text);
}
.wx-side-nav-title-ico { display: inline-flex; color: var(--wx-primary); }
.wx-side-nav-list { display: flex; flex-direction: column; gap: 3px; }
.wx-side-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    border-radius: 8px;
    color: var(--wx-text-2);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    transition: background .15s, color .15s;
}
.wx-side-nav-item:hover { background: var(--wx-surface-2); color: var(--wx-text); }
.wx-side-nav-item.is-active { background: var(--wx-primary-soft); color: var(--wx-primary); font-weight: 600; }
.wx-side-nav-item > i, .wx-side-nav-item .wx-ico { color: var(--wx-primary); font-size: 15px; }
.wx-side-nav-item img { width: 16px; height: 16px; flex: none; border-radius: 5px; object-fit: contain; }
.wx-side-nav-item .wx-fallback-letter { color: var(--wx-primary); font-weight: 700; font-size: 14px; }
.wx-side-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 52px; text-align: center; }
/* 内页收藏夹模块内容 */
.wx-side-nav-body { font-size: 13px; color: var(--wx-text-2); margin-top: 2px; }
.wx-side-nav-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.wx-side-nav-body li { margin: 0; }
.wx-side-nav-body a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--wx-text-2); text-decoration: none; transition: background .15s, color .15s; }
.wx-side-nav-body a:hover { background: var(--wx-surface-2); color: var(--wx-text); }
.wx-side-nav-body a img { width: 16px; height: 16px; flex: none; border-radius: 5px; object-fit: contain; }
/* 三栏布局（左导航 + 内容 + 右栏） */
.wx-layout--side { grid-template-columns: 120px minmax(0, 1fr) minmax(280px, 320px); }

.wx-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wx-sidebar-widget {
    padding: 16px 18px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
    font-size: 13px;
    color: var(--wx-text-2);
    word-break: break-word;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.wx-sidebar-title {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: var(--wx-text);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wx-border);
}
.wx-sidebar-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--wx-primary);
}
.wx-sidebar-widget ul { list-style: none; margin: 0; }
.wx-sidebar-widget ul li {
    padding: 8px 6px;
    border-radius: var(--wx-radius-sm);
    color: var(--wx-text-2);
    border-bottom: 1px dotted var(--wx-border);
    font-size: 13px;
    line-height: 1.5;
    transition: background 0.15s, color 0.15s;
}
.wx-sidebar-widget ul li:last-child { border-bottom: 0; }
.wx-sidebar-widget ul li a { color: var(--wx-text); }
.wx-sidebar-widget ul li a:hover { color: var(--wx-primary); }
.wx-sidebar-widget ul li:hover { background: var(--wx-primary-soft); }
.wx-sidebar-widget .wx-side-imglist li:hover { background: transparent; } /* 图片列表：去掉滑过绿底 */
/* 侧栏纯文字行：hover 时主题色从左向右填充，文字变白，移开还原 */
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li) {
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease;
}
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--wx-primary);
    transform: scaleX(0);
    transform-origin: 0 center;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 0;
}
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li):hover::before {
    transform: scaleX(1);
}
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li):hover {
    background: transparent;
    color: #fff;
}
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li) > a {
    position: relative;
    z-index: 1;
}
.wx-sidebar-widget ul li:not(.wx-imglist):not(.wx-side-comm-s1):not(.wx-side-comm-s2):not(.wx-tab-hd li):not(.wx-tab-pane li):hover > a {
    color: #fff;
}
/* 热门站点排行：hover 扫光改为单一淡色（不用绿、也不用排行榜三色） */
.wx-sidebar-widget .wx-side-hot-rank__item::before { background: var(--wx-primary-soft) !important; }
.wx-sidebar-widget p { margin-bottom: 8px; }
.wx-sidebar-widget p:last-child { margin-bottom: 0; }
.wx-sidebar-widget a { color: var(--wx-text); }
.wx-sidebar-widget a:hover { color: var(--wx-primary); }
.wx-sidebar-widget form input[type="text"],
.wx-sidebar-widget form input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--wx-text);
    background: var(--wx-bg);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius-sm);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.wx-sidebar-widget form input:focus {
    border-color: var(--wx-primary);
    box-shadow: 0 0 0 3px var(--wx-primary-soft);
}
.wx-sidebar-widget form input[type="submit"],
.wx-sidebar-widget form button {
    margin-top: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--wx-primary);
    border: none;
    border-radius: var(--wx-radius-pill);
    cursor: pointer;
    transition: filter 0.15s;
}
.wx-sidebar-widget form input[type="submit"]:hover,
.wx-sidebar-widget form button:hover { filter: brightness(1.06); }
.wx-sidebar-widget img { max-width: 100%; border-radius: var(--wx-radius-sm); }
.wx-sidebar-widget table { width: 100%; font-size: 12px; }
.wx-sidebar-empty {
    text-align: center;
    color: var(--wx-text-2);
    padding: 26px 18px;
}
.wx-sidebar-empty p { font-size: 13px; }

/* ========================= 侧栏小模块（tag 云 / 文章列表 / 评论 / 访客 / 站点信息 / tab） ========================= */
/* ---- tag 云 ---- */
.wx-tags-cloud { display: flex; flex-wrap: wrap; padding-top: 2px; }
.wx-tags-cloud a {
    margin: 5px 4px 2px 0;
    padding: 0 .7em;
    font-size: 13px;
    line-height: 2;
    height: 2em;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.tags0 { background-color: #2997f73d; color: #2997f7; }
a.tags1 { background-color: #00d1ce2b; color: #00898c; }
a.tags2 { background-color: #2997f724; color: #2997f7; }
a.tags3 { background-color: #955cff17; color: #955cff; }
a.tags4 { background-color: #19aa2c1a; color: #19aa2c; }
a.tags5 { background-color: #f1404b17; color: #f1404b; }
a.tags6 { background-color: #ff6f0621; color: #ff6f06; }
a.tags0:hover { background-color: #2997f7; color: #fff; opacity: .85; }
a.tags1:hover { background-color: #08c4c1; color: #fff; opacity: .85; }
a.tags2:hover { background-color: #2997f7; color: #fff; opacity: .85; }
a.tags3:hover { background-color: #955cff; color: #fff; opacity: .85; }
a.tags4:hover { background-color: #19aa2c; color: #fff; opacity: .85; }
a.tags5:hover { background-color: #f1404b; color: #fff; opacity: .85; }
a.tags6:hover { background-color: #ff6f06; color: #fff; opacity: .85; }
.flex-fill { flex: 1 1 auto !important; }

/* ---- 文章列表（文字） ---- */
.wx-sidebar-widget ul.wx-side-list a { color: var(--wx-text); font-size: 13px; }

/* ---- 文章列表（带图） ---- */
.wx-side-imglist .wx-imglist { padding: .3em 0; margin: 0; border-bottom: 0; }
.wx-side-imglist .wx-imglist:last-child { border-bottom: 0; }
.wx-imglist-s1 > a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 8px;
    background: var(--wx-surface-2);
    transition: box-shadow .32s ease-in-out;
}
.wx-imglist-s1 > a:hover { box-shadow: inset 0 0 2px rgba(0,0,0,.05), 0 20px 25px -10px rgba(0,0,0,.14); }
/* 图标闪烁光晕：下方叠同图模糊层，滑过时淡入放大模糊 */
.wx-imglist-s1 .wx-imglist-box { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; }
.wx-imglist-s1 .wx-imglist-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: relative; z-index: 2; display: block; }
.wx-imglist-s1 .blur-img-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    border-radius: 50%; z-index: 1; pointer-events: none;
    transition: all .8s cubic-bezier(.34,1.56,.64,1);
    transform: scale(1); filter: blur(0); opacity: 0;
}
.wx-imglist-s1:hover .blur-img-bg { opacity: 1; transform: scale(1.2); filter: blur(9px); }
.wx-imglist-info { flex: 1; min-width: 0; }
.wx-imglist-info p { font-weight: 700; color: var(--wx-text); font-size: 13px; line-height: 1.4; max-height: 2.8em; overflow: hidden; margin: 0; }
.wx-imglist-info .wx-imglist-intro { display: block; color: var(--wx-text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.wx-imglist-s2 > a { display: flex; flex-direction: column; padding: 0; margin: 0; }
.wx-imglist-s2 .wx-imglist-box { position: relative; width: 100%; height: 90px; margin: 0 0 6px; border-radius: 8px; overflow: hidden; }
.wx-imglist-s2 .wx-imglist-box img { border-radius: 0; }

/* ---- 最新评论 ---- */
.wx-side-comments .wx-side-comm-s1 { padding: .6em 0; display: flex; align-items: center; line-height: 1.2; border-bottom: 1px dotted var(--wx-border); }
.wx-side-comments .wx-side-comm-s1:last-child { border-bottom: 0; }
.wx-side-comm-s1 > a { width: 40px; height: 40px; margin-right: .9em; flex: none; }
.wx-side-comm-s1 > a img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; transition: transform .6s ease-out; }
.wx-side-comm-s1:hover > a img { transform: rotateZ(30deg); }
.wx-side-comm-s1 > section { flex: auto; min-width: 0; overflow: hidden; }
.wx-side-comm-s1 > section a { display: block; line-height: 1.2; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 .4em; padding: 0; color: var(--wx-text); }
.wx-side-comm-s1 > section small { display: block; overflow: hidden; height: 1em; line-height: 1; font-size: .8em; opacity: .55; }
.wx-side-comm-s2 { display: flex; flex-direction: column; padding: .7em 0; line-height: 1.2; border-bottom: 1px dotted var(--wx-border); }
.wx-side-comm-s2:last-child { border-bottom: 0; }
.wx-side-comm-title { display: flex; align-items: center; margin: 0 0 .4em; font-size: 13px; line-height: 1.8; overflow: hidden; }
.wx-side-comm-title > a { display: inline-flex; align-items: center; flex: auto; min-width: 0; }
.wx-side-comm-title > a img { width: 1.8em; height: 1.8em; border-radius: 50%; margin-right: .3em; object-fit: cover; }
.wx-side-comm-title small { flex: none; opacity: .55; font-size: 12px; }
.wx-side-comm-s2 section { background: var(--wx-surface-2); padding: .7em 1em; margin: 0 0 .4em; line-height: 1.5; border-radius: 6px; }
.wx-side-comm-s2 section a { color: var(--wx-text); }
.wx-side-comm-s2 section a:hover { color: var(--wx-primary); }
.wx-side-comm-s2 > p { font-size: 12px; height: 1.2em; margin: 0; opacity: .55; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.wx-side-comm-s2 > p a { color: var(--wx-text-2); }

/* ---- 最近访客 ---- */
.wx-readers-box { padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; }
.wx-readers-box a { display: inline-flex; justify-content: center; align-items: center; flex-direction: column; margin: .4em 0; overflow: hidden; flex: none; }
.wx-readers-box a p { line-height: 2; height: 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; font-size: 12px; color: var(--wx-text-2); }
.wx-readers-rows2 > * { width: calc((100% - 1em) / 2); }
.wx-readers-rows3 > * { width: calc((100% - 2em) / 3); }
.wx-readers-rows4 > * { width: calc((100% - 3em) / 4); }
.wx-readers-rows5 > * { width: calc((100% - 4em) / 5); }
.wx-readers-rows6 > * { width: calc((100% - 5em) / 6); }
.wx-readers-box a img { width: 46px; max-width: 100%; height: 46px; line-height: 1; padding: 0; display: block; margin: 0 auto 3px; border-radius: 50%; object-fit: cover; transition: transform .6s ease-out; }
.wx-readers-box a:hover img { transform: rotateZ(30deg); }

/* ---- 站点信息（头像统计） ---- */
/* 站点信息模块：去除内边距，头部通栏占满 widget 左右两侧 */
.wx-sidebar-widget--flush { padding: 0; overflow: hidden; }
.wx-sidebar-widget--flush .wx-profile-stats { padding: 0 18px 16px; }
.wx-sidebar-widget--flush .wx-profile-header { margin: 0 -18px 20px; }
.wx-profile-header { position: relative; z-index: 1; height: 120px; padding-top: 44px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 0; background: linear-gradient(135deg, var(--wx-primary), var(--wx-primary-2)); }
.wx-profile-header img { margin: 0 auto; display: block; width: 84px; height: 84px; border-radius: 99px; padding: 5px; object-fit: cover; background: rgba(255,255,255,.88); }
.wx-site-info { margin-bottom: 10px; text-align: center; }
.wx-site-name { font-size: 16px; font-weight: 700; color: var(--wx-text); margin-bottom: 2px; }
.wx-site-desc { font-size: 13px; color: var(--wx-text-2); }
.wx-profile-stats-grid { width: 100%; display: flex; align-items: center; }
.wx-stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; user-select: none; font-size: 14px; color: var(--wx-text-2); }
.wx-stat-item:nth-child(2) { border-left: 1px solid var(--wx-border); border-right: 1px solid var(--wx-border); }
.wx-stat-label { max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--wx-text-2); margin-bottom: 3px; }
.wx-stat-value { font-size: 18px; font-weight: 700; color: var(--wx-primary); }

/* ---- 三 tab 切换 ---- */
.wx-side-tab { position: relative; }
.wx-side-tab .wx-tab-hd { display: flex; margin: 0 0 10px; border-bottom: 1px solid var(--wx-border); }
.wx-side-tab .wx-tab-hd li { flex: 1; text-align: center; padding: 6px 2px; font-size: 14px; color: var(--wx-text-2); cursor: pointer; position: relative; white-space: nowrap; transition: color .3s ease; }
.wx-side-tab .wx-tab-hd li.wx-on { font-weight: 700; color: var(--wx-primary); }
.wx-side-tab .wx-tab-hd li.wx-on::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 50%; height: 3px; background: var(--wx-primary); border-radius: 2px; }
.wx-side-tab .wx-tab-bd { padding-top: 4px; }
.wx-side-tab .wx-tab-pane { display: none; }
.wx-side-tab .wx-tab-pane:first-child { display: block; }
.wx-side-tab .wx-tab-pane ul { list-style: none; margin: 0; }
.wx-side-tab .wx-tab-pane li.wx-imglist { padding: .3em 0; }
.wx-side-tab .wx-tab-pane li { padding: 8px 4px; border-bottom: 1px dotted var(--wx-border); font-size: 13px; }
.wx-side-tab .wx-tab-pane li:last-child { border-bottom: 0; }
.wx-side-tab .wx-tab-pane li a { color: var(--wx-text); }
.wx-side-tab .wx-tab-pane li a:hover { color: var(--wx-primary); }
li::marker { content: ""; }

/* ---- 细节页下方样式重置，确保侧栏模块内容不被继承干扰 ---- */
.wx-sidebar-widget .wx-tags-cloud { padding: 0; }

/* ---- 随机标签「换一换」 ---- */
.wx-tag-rand__hd {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 10px;
}
.wx-tag-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wx-text-2);
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease;
}
.wx-tag-switch:hover {
    color: #fff;
    background: var(--wx-primary);
    border-color: var(--wx-primary);
}
.wx-tag-switch:active { transform: scale(.95); }
.wx-tag-switch svg { transition: transform .3s ease; }
.wx-tag-switch:hover svg { transform: rotate(180deg); }
.tag-item.wx-tag-hidden { display: none; }

/* ------------------------------------------------------------------ 详情页 */
.nav-single { max-width: 1440px; }
.back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 16px; font-size: 13px; color: var(--wx-text-2);
    transition: color 0.18s;
}
.back:hover { color: var(--wx-primary); }

/* ---- 面包屑（单页顶部） ---- */
.wx-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--wx-text-2);
}
.wx-breadcrumb a {
    color: var(--wx-text-2);
    text-decoration: none;
    transition: color 0.18s;
}
.wx-breadcrumb a:hover { color: var(--wx-primary); }
.wx-breadcrumb-sep { color: var(--wx-text-2); opacity: 0.5; }
.wx-breadcrumb-current {
    color: var(--wx-text);
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ---- 单页标题卡（左右两列：左信息堆叠 + 右预览大图；底部通栏元信息） ---- */
.detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
        "info preview"
        "meta meta";
    gap: 24px;
    padding: 26px 28px 22px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
}
.detail-hero-info {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}
.detail-hero-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.detail-hero-logo {
    flex: none;
    width: 100px;
    height: 100px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
}
.detail-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--wx-surface-2);
}
.detail-hero-titlebar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.detail-hero-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--wx-text);
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detail-hero-intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--wx-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* =============================================================
   右侧预览区 — Dribbble 风格（粉色 blob + 设备框架 + 点阵装饰）
   ============================================================= */
.detail-hero-preview {
    grid-area: preview;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: -24px -26px -22px 2px;
    border-radius: var(--wx-radius-sm);
    overflow: hidden;
    background: #fafafa;
}
/* 粉色 blob — 左侧大型有机流体 */
.detail-hero-preview-blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: -18%;
    bottom: -8%;
    width: 72%;
    height: 88%;
    border-radius: 55% 45% 30% 70% / 50% 35% 65% 50%;
    background: linear-gradient(135deg, #f8e8ee 0%, #f0d0dc 100%);
}
/* 右上角点阵 */
.detail-hero-preview-dots {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}
/* 设备框架（带厚边框的设备风格） */
.detail-hero-device {
    position: relative;
    z-index: 2;
    width: 68%;
    max-width: 340px;
    transform: translateY(20%);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 3px solid #1a1a1a;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.08);
}
.detail-hero-device-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.detail-hero-device-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e9ecef;
}
.detail-hero-device-dot:nth-child(1) { background: #ff5f57; }
.detail-hero-device-dot:nth-child(2) { background: #ffbd2e; }
.detail-hero-device-dot:nth-child(3) { background: #28c840; }
.detail-hero-device-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f5f5f5;
    overflow: hidden;
}
.detail-hero-device-screen .detail-hero-preview-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 无 og/正文大图时：中央 favicon 白卡 */
.detail-hero-preview-fb {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-hero-preview-fb img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
}

.detail-hero-edit {
    flex: none;
    font-size: 13px;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.detail-hero-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wx-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--wx-primary) 35%, transparent);
}
.detail-hero-edit:hover {
    color: var(--wx-primary);
    text-decoration: underline;
}
.detail-hero-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px 18px;
    font-size: 13px;
    color: var(--wx-text-2);
    padding-top: 16px;
    margin-top: 2px;
    border-top: 1px solid var(--wx-border);
}
.detail-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
}
.detail-hero-meta-item .wx-ico {
    width: 14px;
    height: 14px;
    color: inherit;
    opacity: 0.85;
}
.detail-hero-meta-item a {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 26ch;
}
.detail-hero-meta-item a:hover { text-decoration: underline; }
/* meta 通栏里的标签：胶囊样式与 wx-attrs 一致（灰底深灰字） */
.detail-hero-meta .detail-hero-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--wx-text);
    background: color-mix(in srgb, var(--wx-text) 6%, var(--wx-surface));
    border: none;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    max-width: none;
    overflow: visible;
    transition: all 0.15s;
}
.detail-hero-meta .detail-hero-meta-tag:hover {
    color: var(--wx-primary);
    text-decoration: none;
}
/* 标签所在的 meta 项：吸收剩余宽度，让标签在同一点内省略 */
.detail-hero-meta .detail-hero-meta-item--tags {
    flex: 1 1 auto;
    min-width: 0;
}
/* detail-hero-meta 里的标签列表：单行排布，超出部分省略号截断，不换行 */
.detail-hero-meta .detail-hero-meta-tags {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 操作条：主操作（链接直达，绿实心）+ 次级（反馈、点赞，描边） */
.detail-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.detail-hero-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 34px;
    border-radius: 8px;
    background: var(--wx-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--wx-primary) 28%, transparent);
    white-space: nowrap;
    transition: all 0.2s;
}
.detail-hero-go:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wx-primary) 35%, transparent);
    color: #fff;
}
.detail-hero-go .wx-ico { width: 16px; height: 16px; color: #fff; }
.detail-hero-fb,
.detail-hero-like {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--wx-border);
    background: var(--wx-surface);
    color: var(--wx-text);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.detail-hero-fb {
    gap: 6px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
}
.detail-hero-fb .wx-ico { width: 18px; height: 18px; }
.detail-hero-fb:hover {
    border-color: var(--wx-primary);
    color: var(--wx-primary);
    transform: translateY(-1px);
}
.detail-hero-like { gap: 6px; padding: 0 24px; font-size: 14px; font-weight: 600; }
.detail-hero-like .wx-like-ico { font-size: 15px; line-height: 1; transition: transform 0.2s; }
.detail-hero-like:hover {
    border-color: #ef4444;
    color: #ef4444;
    transform: translateY(-1px);
}
.detail-hero-like.is-done {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}
.detail-hero-like.is-done .wx-like-ico { transform: scale(1.15); }

/* ---- 网站描述卡 ---- */
.detail-desc {
    margin-top: 20px;
    padding: 22px 26px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
}
/* 文章内小节标题（网站描述 / 同类推荐等）：图标 + 文字，统一布局与对齐 */
.wx-sec-title,
.nav-sec-title,
.detail-desc-title,
.detail-related-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wx-text);
}
.wx-sec-title .wx-ico,
.nav-sec-title .wx-ico,
.detail-desc-title .wx-ico,
.detail-related-title .wx-ico {
    flex: none;
    color: var(--wx-primary);
}
/* SVG 默认 inline 会在图标盒子底部留基线空隙 → 图标整体上偏、与文字不对齐；改成 block 撑满消除空隙 */
.wx-sec-title .wx-ico svg,
.nav-sec-title .wx-ico svg,
.detail-desc-title .wx-ico svg,
.detail-related-title .wx-ico svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* 区块标题（左侧绿色竖条 + 粗体，参考图风格） */
.section-title {
    margin: 0 0 16px;
    padding: 2px 0 2px 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--wx-text);
    border-left: 4px solid var(--wx-primary);
    background: linear-gradient(to right, color-mix(in srgb, var(--wx-primary) 6%, transparent), transparent 60%);
}
.detail-desc-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--wx-text);
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}
.detail-desc-body p,
.detail-desc-body span,
.detail-desc-body a,
.detail-desc-body div {
    white-space: normal !important;
    text-wrap: wrap !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
.detail-desc-body img { max-width: 100%; border-radius: var(--wx-radius-sm); margin: 10px 0; }
.detail-empty { color: var(--wx-text-2); font-size: 14px; margin: 0; }

/* ---- 同类推荐（与文章卡片分离） ---- */
.detail-related {
    margin-top: 28px;
    padding: 24px 26px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
}

/* 同类推荐：标题 + 换一换按钮 两端对齐（按钮贴页面最右侧） */
.detail-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.detail-related__head .section-title {
    margin: 0;
    flex: 0 1 auto;
}
/* “换一换”按钮（同类候选 > 8 时出现） */
.wx-rel-switch {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--wx-text-2);
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease;
}
.wx-rel-switch:hover {
    color: #fff;
    background: var(--wx-primary);
    border-color: var(--wx-primary);
}
.wx-rel-switch:active { transform: scale(.95); }
.wx-rel-switch svg { transition: transform .3s ease; }
.wx-rel-switch:hover svg { transform: rotate(180deg); }
/* 第 9 个起默认隐藏：供“换一换”随机挑一批展示 */
.detail-related .nav-card-h.wx-rel-hidden { display: none; }

/* ---- 横版同类推荐卡片（detail 页用）---- */
/* 横版同类推荐卡片（detail 页用），detail 内 4 列 */
.nav-card-h-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.detail-related .nav-card-h-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1100px) { .detail-related .nav-card-h-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .detail-related .nav-card-h-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    /* 移动端：同类推荐一行两个 */
    .detail-related .nav-card-h-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* 窄屏两列：卡片进一步紧凑，保证 logo + 标题 + 简介 都放得下 */
    .detail-related .nav-card-h { gap: 8px; padding: 8px 9px; border-radius: 10px; }
    .detail-related .nav-card-h__logo { width: 36px; height: 36px; padding: 2px; border-radius: 9px; }
    .detail-related .nav-card-h__logo img { border-radius: 6px; }
    .detail-related .nav-card-h__title { font-size: 12.5px; }
    .detail-related .nav-card-h__intro { font-size: 11px; }
}
/* 同类推荐：横版紧凑卡片 + 精致点缀 + 入场/交互动画 */
.detail-related .nav-card-h-list { gap: 10px; }
.detail-related .nav-card-h {
    position: relative;            /* hover 用 top 上浮，避开与入场 transform 冲突 */
    align-items: center;
    padding: 9px 12px 9px 13px;
    border-radius: 11px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--wx-primary) 5%, transparent), transparent 60%), var(--wx-surface-2);
    transition: top .18s ease, box-shadow .18s ease, border-color .18s ease;
    opacity: 0;                    /* 入场前隐藏，避免闪烁 */
    animation: wx-rel-in .5s cubic-bezier(.22, .61, .36, 1) both;
}
.detail-related .nav-card-h:nth-child(1) { animation-delay: .04s; }
.detail-related .nav-card-h:nth-child(2) { animation-delay: .10s; }
.detail-related .nav-card-h:nth-child(3) { animation-delay: .16s; }
.detail-related .nav-card-h:nth-child(4) { animation-delay: .22s; }
.detail-related .nav-card-h:nth-child(5) { animation-delay: .28s; }
.detail-related .nav-card-h:nth-child(6) { animation-delay: .34s; }
.detail-related .nav-card-h:nth-child(7) { animation-delay: .40s; }
.detail-related .nav-card-h:nth-child(8) { animation-delay: .46s; }
.detail-related .nav-card-h:hover {
    top: -2px;                     /* 上浮（不碰 transform，避开入场动画锁定） */
    border-color: var(--wx-primary-line);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .18);
}
.detail-related .nav-card-h__logo {
    width: 46px; height: 46px;
    padding: 3px;
    border-radius: 11px;
    background: var(--wx-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .2s ease, background .2s ease;
}
.detail-related .nav-card-h__logo img { border-radius: 8px; }
.detail-related .nav-card-h:hover .nav-card-h__logo { background: var(--wx-primary-soft); transform: scale(1.1); }
.detail-related .nav-card-h__title {
    position: relative;
    font-size: 13.5px;
    font-weight: 700;
    transition: color .18s ease;
}
.detail-related .nav-card-h:hover .nav-card-h__title { color: var(--wx-primary); }
.detail-related .nav-card-h__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    height: 2px; width: 0;
    border-radius: 2px;
    background: var(--wx-primary);
    transition: width .22s ease;
}
.detail-related .nav-card-h:hover .nav-card-h__title::after { width: 100%; }
.detail-related .nav-card-h__intro {
    font-size: 12px;
    line-height: 1.4;
    color: var(--wx-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 同类推荐卡片入场动画：淡入 + 上浮 */
@keyframes wx-rel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 无障碍：用户系统开启“减少动效”时关闭动画 */
@media (prefers-reduced-motion: reduce) {
    .detail-related .nav-card-h { animation: none; opacity: 1; }
    .detail-related .nav-card-h__logo,
    .detail-related .nav-card-h__title::after { transition: none; }
}
.nav-card-h {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}
.nav-card-h:hover {
    border-color: var(--wx-primary-line);
    background: var(--wx-primary-soft);
    transform: translateY(-1px);
}
.nav-card-h__logo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
}
.nav-card-h__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nav-card-h__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-card-h__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-card-h__intro {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--wx-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* nav-card-h__labels / nav-card-h__lbl 已随同类推荐去标签而移除（无 HTML 产出） */

/* ---- 侧栏热门站点排行 ---- */
.wx-side-hot-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wx-side-hot-rank__empty {
    color: var(--wx-text-2);
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
}
.wx-side-hot-rank__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wx-side-hot-rank__item:hover {
    background: var(--wx-surface-2);
}
.wx-side-hot-rank__no {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--wx-surface-2);
    color: var(--wx-text-2);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
}
.wx-side-hot-rank__item:hover .wx-side-hot-rank__no { transform: scale(1.08); }
/* 前三名按位置三色：金 / 蓝 / 玫红（纯 CSS 实现，不依赖 HTML 类名） */
.wx-side-hot-rank__item:nth-child(1) .wx-side-hot-rank__no {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 1px 5px rgba(245, 158, 11, 0.45);
}
.wx-side-hot-rank__item:nth-child(2) .wx-side-hot-rank__no {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 1px 5px rgba(59, 130, 246, 0.45);
}
.wx-side-hot-rank__item:nth-child(3) .wx-side-hot-rank__no {
    background: #f43f5d;
    color: #fff;
    box-shadow: 0 1px 5px rgba(244, 63, 93, 0.45);
}
.wx-side-hot-rank__logo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wx-side-hot-rank__item:hover .wx-side-hot-rank__logo {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}
.wx-side-hot-rank__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wx-side-hot-rank__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wx-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s ease;
}
.wx-side-hot-rank__name:hover { color: var(--wx-primary); }
.wx-side-hot-rank__views {
    flex: none;
    font-size: 11px;
    color: var(--wx-text-2);
    font-weight: 500;
}

/* ------------------------------------------------------------------ 页脚 */
.nav-footer { 
    padding: 30px 18px 44px; 
    background: #475569; 
    border-top: 1px solid var(--wx-border); 
    color: var(--wx-text-2); 
} 
.nav-footer-inner {
    /* max-width: 1240px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    /* text-align: center; */
} 
.foot-flinks { 
    width: 100%; 
    max-width: 980px; 
} 
/* 友情链接标题完全保留你原来的写法，一丝未改 */ 
.foot-label {
    font-weight: 600;
    color: var(--wx-surface-2); 
    margin-right: 8px;
} 
.foot-flink-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px 12px; 
    padding: 10px 12px; 
    border-radius: 10px; 
    background: rgba(12, 16, 23, 0.35); 
    margin-top: 10px;
} 
.foot-flink-list a { 
    color: var(--wx-surface-2); 
    transition: color 0.18s; 
} 
.foot-flink-list a:hover { 
    color: var(--wx-primary); 
} 
.foot-stats b { 
    color: var(--wx-primary); 
} 
.foot-slogan { 
    font-size: 14px; 
    color: var(--wx-text); 
    font-weight: 500; 
} 
.foot-copy { 
    font-size: 12px; 
} 
.foot-sub { 
    font-size: 12px; 
} 
.foot-sub a { 
    color: var(--wx-text-2); 
} 
.foot-sub a:hover { 
    color: var(--wx-primary); 
} 

/* ------------------------------------------------------------------ 外链/合作大块 */
.coop-block {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
.coop-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    flex: 1 1 auto;
    padding: 12px 16px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius-sm);
    box-shadow: var(--wx-shadow);
    font-size: 14px;
    font-weight: 500;
    color: var(--wx-text);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.coop-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wx-shadow-hover);
    border-color: var(--wx-primary-line);
    background: var(--wx-primary-soft);
    color: var(--wx-primary);
}
.coop-card i { font-size: 18px; color: var(--wx-primary); }

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1100px) {
    .quick-item { width: 56px; padding: 6px 3px; }
    .quick-item i { font-size: 16px; }
}
@media (max-width: 860px) {
    .quick-menu { display: none; }
}
@media (max-width: 1100px) {
    .nav-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .brand-name { display: none; }
    .iiice-search { max-width: none; }
    .brand-bar-inner { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
    .brand-left { justify-content: flex-start; min-width: 0; }
    .brand-right { display: none; }
    .nav-main { padding: 16px 12px 32px; }
    .nav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    /* 移动端：保持左右两列（原版位置），预览区缩为固定小方块，信息区优先占宽 */
    .detail-hero { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "info preview" "meta meta"; gap: 12px; padding: 14px; }
    .detail-hero-info { gap: 12px; }
    .detail-hero-body { gap: 10px; }
    .detail-hero-logo { width: 46px; height: 46px; border-radius: 12px; }
    .detail-hero-title { font-size: 17px; }
    .detail-hero-intro { font-size: 13px; line-height: 1.6; }
    .detail-hero-go { height: 34px; padding: 0 12px; font-size: 13px; }
    .detail-hero-fb,
    .detail-hero-like { height: 34px; gap: 4px; }
    .detail-hero-fb { padding: 0 9px; font-size: 12px; }
    .detail-hero-like { padding: 0 9px; font-size: 12px; }
    /* 预览区：正方形小方块，与信息区顶部对齐 */
    .detail-hero-preview { margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; align-self: start; box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.16); }
    /* 设备框在方块内缩小居中，取消下沉重排 */
    .detail-hero-device { width: 82%; max-width: none; transform: none; border-width: 2px; border-radius: 10px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.12); }
    .detail-hero-device-bar { padding: 5px 7px; gap: 3px; }
    .detail-hero-device-dot { width: 5px; height: 5px; }
    .detail-hero-preview-dots { display: none; }
    .detail-hero-preview-blob { left: -20%; bottom: -14%; width: 74%; height: 80%; }
    .nav-card-h-list { grid-template-columns: 1fr; }
    .section-title { font-size: 15px; }
    .detail-desc { padding: 18px; }
    .detail-related { padding: 18px; }
}
@media (max-width: 980px) {
    .wx-layout { grid-template-columns: 1fr; gap: 20px; }
    .wx-sidebar { position: static; }
    .wx-layout--side { grid-template-columns: 1fr; }
    .nav-side { grid-template-columns: 1fr; }
    .nav-side .wx-side-nav { position: static; transform: none; }
    /* 后台「基础与外观 → 移动端侧栏」关闭时：窄屏隐藏整列侧栏，主内容占满 */
    body.wx-side-m-off .wx-layout-side { display: none; }
}
@media (max-width: 768px) {
    .wx-side-nav { display: none; }
}
@media (max-width: 560px) {
    .nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .nav-card { height: 38px; }
}
@media (max-width: 420px) {
    .nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .coop-card { min-width: 100%; }
}


/* ========================================================================
 * daott 顶部两层头部
 * ====================================================================== */

/* ---------- 顶部公告条 ---------- */
.top-notice {
    background: #475569;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 32px;
}
.top-notice-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.top-notice-icon { color: #facc15; }
.top-notice-text { flex: 1; text-align: center; }
.top-notice-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.top-notice-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
}
.top-notice-date-icon { color: #94a3b8; }

/* ---------- 主头部品牌区 ---------- */
.brand-bar {
    background: var(--wx-surface);
    border-bottom: 1px solid var(--wx-border);
}
.brand-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 16px 18px;
    display: grid;
    grid-template-columns: 280px 1fr 360px;
    gap: 28px;
    align-items: center;
}

/* 左：Logo + 标题 + 两行 slogan */
.brand-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.brand-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}
.brand-avatar-letter {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.brand-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-titles {
    flex: 1;
    min-width: 0;
}
.brand-title {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--wx-text);
    letter-spacing: -0.5px;
}
.brand-slogan {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--wx-text-2);
    font-size: 12px;
    line-height: 1.5;
}
.brand-slogan-line { display: block; }

/* 中：daott 风格搜索框（框内左侧切换搜索引擎） */
.brand-center {
    min-width: 0;
    display: flex;
    justify-content: center;
}
.iiice-search {
    position: relative;
    width: 100%;
    max-width: 680px;
}
.iiice-search-box {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 6px 0 4px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    border-radius: 24px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.iiice-search-box:focus-within {
    border-color: var(--wx-primary);
    box-shadow: 0 0 0 3px var(--wx-primary-soft);
}
.iiice-search-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    padding: 0 10px 0 8px;
    margin: 0 4px 0 2px;
    border-right: 1px solid var(--wx-border);
    border-radius: 18px 0 0 18px;
    color: var(--wx-text);
    cursor: pointer;
    flex: none;
    transition: background 0.15s;
}
.iiice-search-switch:hover { background: color-mix(in srgb, var(--wx-text) 8%, transparent); }
.iiice-search-switch-ico { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.iiice-search-switch-caret { width: 10px; height: 10px; color: var(--wx-text-2); margin-left: 1px; }
.iiice-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 15px;
    color: var(--wx-text);
}
.iiice-search-input::placeholder { color: var(--wx-text-2); }
.iiice-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--wx-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}
.iiice-search-submit:hover { background: var(--wx-primary-2); transform: scale(1.04); }

/* 顶部条内深浅色切换按钮：浅色显月亮(点击转深)，深色显太阳。
   与日期同组（.top-notice-tools），无边框仅图标。 */
.top-notice-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 0;
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
}
.top-notice-dark:hover {
    color: #fff;
}
.top-notice-dark svg { width: 15px; height: 15px; }
.top-notice-dark .tid-sun { display: none; }
.top-notice-dark .tid-moon { display: inline-block; }
.dark .top-notice-dark .tid-moon { display: none; }
.dark .top-notice-dark .tid-sun { display: inline-block; }

/* 引擎下拉面板 */
.iiice-search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    padding: 12px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(16, 24, 20, 0.18);
}
.iiice-search-dropdown.is-open { display: block; }
.iiice-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.iiice-search-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--wx-surface-2);
    color: var(--wx-text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
}
.iiice-search-item:hover {
    border-color: var(--wx-primary);
    background: var(--wx-primary-soft);
}
.iiice-search-item img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    flex: none;
}
.iiice-search-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右：5 个方块垂直 + 下方官方群 */
.brand-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-left: 100px;
    position: relative;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.quick-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 8px;
    border-radius: 10px;
    color: var(--wx-text);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    transition: transform 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.quick-grid-item:hover {
    transform: translateY(-2px);
    border-color: var(--wx-primary-line);
    color: var(--wx-primary);
}
.quick-grid-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--wx-surface);
    font-size: 16px;
}

/* 图标：支持 Font Awesome 类名或图片地址 */
.wx-ico-img {
    display: inline-block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -3px;
    border-radius: 4px;
}
.quick-grid-ico .wx-ico-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.quick-grid-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.brand-qq {
    text-align: center;
    font-size: 11px;
    color: var(--wx-text-2);
}
.brand-qq i, .brand-qq .wx-ico { color: #06b6d4; margin-right: 3px; }

/* ---------- 顶栏下方水平小外链 ---------- */
.mini-bar {
    background: var(--wx-surface);
    border-bottom: 1px solid var(--wx-border);
}
.mini-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.mini-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    color: var(--wx-text-2);
    font-size: 12px;
    transition: all 0.18s;
}
.mini-item:hover {
    border-color: var(--wx-primary);
    color: var(--wx-primary);
    background: var(--wx-primary-soft);
}
/* ========================================================================
 * daott 顶部响应式
 * ====================================================================== */
@media (max-width: 980px) {
    .brand-bar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: center;
    }
    .brand-right { display: none; }
}
@media (max-width: 640px) {
    .top-notice-inner { font-size: 12px; gap: 10px; }
    .top-notice-text { text-align: left; }
    .top-notice-date { display: none; }
    .brand-bar-inner { padding: 12px 12px; gap: 10px; }
    .brand-avatar { width: 48px; height: 48px; border-radius: 14px; }
    .brand-avatar-letter { font-size: 20px; }
    .brand-title { font-size: 18px; line-height: 1.2; letter-spacing: -0.3px; }
    .brand-slogan { font-size: 11px; }
    .brand-slogan-line + .brand-slogan-line { display: none; }
    .iiice-search-box { height: 40px; border-radius: 22px; padding: 0 4px 0 2px; }
    .iiice-search-switch { height: 30px; padding: 0 8px 0 6px; font-size: 12px; }
    .iiice-search-input { font-size: 14px; }
    .iiice-search-btn { width: 32px; height: 32px; }
    .mini-bar-inner { padding: 10px 12px; }
}
/* .quick-grid 样式保留：原 ≤420px 时 quick-grid 改 3 列已无意义（移动端 brand-right 不再渲染） */

/* ===== 主题内置反馈弹窗（融入 wx_nav1） ===== */
.wx-fb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.wx-fb.wx-fb--show { display: flex; align-items: center; justify-content: center; }
.wx-fb__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.wx-fb__card {
    position: relative;
    width: 360px;
    max-width: 90vw;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius, 14px);
    padding: 22px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    color: var(--wx-text);
    animation: wxFbIn 0.2s ease;
}
@keyframes wxFbIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}
.wx-fb__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wx-fb__title { font-size: 17px; font-weight: 700; }
.wx-fb__close { border: none; background: none; font-size: 20px; line-height: 1; color: var(--wx-text-2); cursor: pointer; }
.wx-fb__sub { font-size: 13px; color: var(--wx-text-2); margin: 0 0 16px; }
.wx-fb__opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wx-fb__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--wx-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.wx-fb__opt:hover { border-color: var(--wx-primary); background: var(--wx-primary-soft); }
.wx-fb__opt input { accent-color: var(--wx-primary); width: 16px; height: 16px; }
.wx-fb__opt:has(input:checked) {
    border-color: var(--wx-primary);
    background: var(--wx-primary-soft);
    color: var(--wx-primary);
    font-weight: 600;
}
.wx-fb__actions { display: flex; gap: 10px; }
.wx-fb__submit, .wx-fb__cancel { flex: 1; padding:  10px 0; border-radius: 10px; font-size: 14px; cursor: pointer; }
.wx-fb__submit { background: var(--wx-primary); color: #fff; font-weight: 600; transition: filter 0.2s; }
.wx-fb__submit:hover { filter: brightness(1.06); }
.wx-fb__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.wx-fb__cancel { background: var(--wx-surface); border: 1px solid var(--wx-border); color: var(--wx-text); }
.wx-fb__cancel:hover { border-color: var(--wx-primary); color: var(--wx-primary); }

/* ===== 浮动工具栏：返回顶部 + 深浅色切换 ===== */
.wx-float-tools {
    position: fixed;
    right: 20px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}
.wx-float-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 16px;
}
.wx-float-btn:hover {
    transform: scale(1.08);
}
.wx-float-dark {
    background: #334155;
    color: #e2e8f0;
}
.wx-float-dark:hover {
    background: #475569;
    color: #fff;
}
.wx-float-dark .tid-sun { display: none; }
.wx-float-dark .tid-moon { display: inline-block; }
.dark .wx-float-dark .tid-moon { display: none; }
.dark .wx-float-dark .tid-sun { display: inline-block; }
.wx-float-top,
.wx-float-apply {
    background: var(--wx-primary);
    color: #fff;
    text-decoration: none;
}
.wx-float-top:hover,
.wx-float-apply:hover {
    background: var(--wx-primary-2);
    filter: brightness(1.06);
    color: #fff;
}
/* ===== 全局 toast 通知（参考 wx_samsara 四态色+图标+堆叠，主题原生实现） ===== */
.wx-toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.wx-toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    max-width: 340px;
    padding: 12px 16px 12px 14px;
    border-radius: var(--wx-radius);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    color: var(--wx-text);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: var(--wx-shadow);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transform-origin: right bottom;
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    transition: transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.3s ease;
}
.wx-toast-item.is-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.wx-toast-ico {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.wx-toast-ico svg { width: 16px; height: 16px; }
.wx-toast-text { flex: 1 1 auto; word-break: break-word; }
/* 四态色：成功绿 / 警告橙 / 错误红 / 信息蓝 */
.wx-toast-item.toast-success .wx-toast-ico { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.wx-toast-item.toast-warning .wx-toast-ico { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.wx-toast-item.toast-error   .wx-toast-ico { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.wx-toast-item.toast-info    .wx-toast-ico { color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.dark .wx-toast-item {
    background: rgba(24, 29, 25, 0.86);
    color: var(--wx-text);
    border-color: rgba(255, 255, 255, 0.1);
}
.dark .wx-toast-ico { background: rgba(255, 255, 255, 0.08); }

/* ===== 申请收录强提示：屏幕居中模态（仅收录用，不影响角落 toast） ===== */
.wx-modal-mask {
    position: fixed; inset: 0; z-index: 10010;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0; transition: opacity 0.28s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.wx-modal-mask.is-show { opacity: 1; }
.wx-modal {
    width: min(86vw, 320px);
    padding: 26px 24px 22px;
    border-radius: var(--wx-radius);
    background: #fff; color: var(--wx-text);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
    text-align: center;
    transform: translateY(12px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.wx-modal-mask.is-show .wx-modal { transform: translateY(0) scale(1); }
.wx-modal-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 12px;
}
.wx-modal-ico svg { width: 26px; height: 26px; }
.wx-modal-text { margin: 0 0 18px; font-size: 15px; line-height: 1.6; word-break: break-word; }
.wx-modal-btn {
    border: 0; cursor: pointer; padding: 9px 28px; border-radius: 999px;
    background: var(--wx-primary); color: #fff; font-size: 14px;
    transition: filter 0.2s ease;
}
.wx-modal-btn:hover { filter: brightness(1.06); }
.wx-modal--success .wx-modal-ico { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.wx-modal--warning .wx-modal-ico { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.wx-modal--error   .wx-modal-ico { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.wx-modal--info    .wx-modal-ico { color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.dark .wx-modal { background: #1b211c; color: var(--wx-text); }

.wx-float-login {
    background: rgba(255,255,255,.82);
    color: #334155;
    border: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.wx-float-login:hover {
    background: #fff;
    color: var(--wx-primary);
}
.dark .wx-float-login {
    background: rgba(30,41,59,.72);
    color: #e2e8f0;
    border-color: rgba(255,255,255,.1);
}
.dark .wx-float-login:hover {
    background: rgba(51,65,85,.85);
    color: var(--wx-primary);
}
.wx-float-btn svg {
    width: 18px;
    height: 18px;
}

/* 站点属性标签（已备案 / 免费 / 开源 等角标） */
.wx-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.wx-attr-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--wx-text);
    background: color-mix(in srgb, var(--wx-text) 6%, var(--wx-surface));
    border: none;
    border-radius: 999px;
}
/* 后台文章编辑页：属性复选框排列 */
.wx-attr-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 6px 0 2px;
}
.wx-attr-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}
.dark .wx-attr-pick { color: #cbd5e1; }

/* ============== 申请收录页 ============== */
.apply-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 16px 56px;
}
.apply-card {
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
    padding: 28px 26px;
}
.apply-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--wx-text);
}
.apply-tip {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--wx-text-2);
    line-height: 1.6;
}
.apply-form { display: flex; flex-direction: column; gap: 16px; }
.apply-field { display: flex; flex-direction: column; gap: 7px; }
.apply-label { font-size: 14px; font-weight: 600; color: var(--wx-text); }
.apply-label i { color: #ef4444; font-style: normal; margin-left: 2px; }
.apply-field input,
.apply-field select,
.apply-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wx-border);
    border-radius: 10px;
    background: var(--wx-bg);
    color: var(--wx-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
    outline: none;
    border-color: var(--wx-primary);
}
.apply-field textarea { resize: vertical; line-height: 1.6; }
/* 网址行：输入框 + 获取按钮 */
.apply-input-row { display: flex; gap: 8px; align-items: stretch; }
.apply-input-row input { flex: 1 1 auto; min-width: 0; }
.apply-fetch {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid var(--wx-primary);
    border-radius: 10px;
    background: var(--wx-primary);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s, opacity 0.2s;
}
.apply-fetch:hover { filter: brightness(1.06); }
.apply-fetch:disabled { opacity: 0.6; cursor: not-allowed; }
.apply-hint { font-size: 12px; color: var(--wx-text-2); }
.apply-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 4px 2px;
}
.apply-attr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--wx-text-2);
    cursor: pointer;
}
.apply-attr input { accent-color: var(--wx-primary); }
.apply-submit {
    margin-top: 6px;
    padding: 12px 0;
    border: none;
    border-radius: 10px;
    background: var(--wx-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
}
.apply-submit:hover { filter: brightness(1.06); }
.apply-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 480px) {
    .apply-card { padding: 22px 16px; }
}

/* ===== 首页分类 Tab 切换 ===== */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wx-border, #e2e8f0);
}
.nav-tab {
    appearance: none;
    border: 1px solid var(--wx-border, #e2e8f0);
    background: var(--wx-surface-2, #f8fafc);
    color: var(--wx-text-2, #64748b);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.nav-tab:hover { border-color: var(--wx-primary); color: var(--wx-primary); }
.nav-tab.is-active {
    background: var(--wx-primary);
    border-color: var(--wx-primary);
    color: #fff;
    font-weight: 600;
}
.nav-section.is-hidden { display: none; }

/* ===== 普通文章内页 ===== */
.detail-article {
    background: var(--wx-surface, #fff);
    border: 1px solid var(--wx-border, #e2e8f0);
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.18);
}
.detail-article-head { margin-bottom: 14px; }
.detail-article-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wx-text, #0f172a);
    margin: 0 0 10px;
}
.detail-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--wx-text-2, #64748b);
}
.detail-article-meta .da-meta { display: inline-flex; align-items: center; gap: 5px; }
.detail-article-meta .da-meta .wx-ico { width: 15px; height: 15px; opacity: 0.7; }
.detail-article-meta .da-edit {
    margin-left: auto;
    color: var(--wx-primary);
    text-decoration: none;
    font-size: 13px;
}
.detail-article-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--wx-text, #1e293b);
    word-break: break-word;
}
.detail-article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.detail-article-body a { color: var(--wx-primary); }
.detail-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--wx-border, #e2e8f0);
}
.detail-article-tags .da-tag {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--wx-primary);
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 999px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background 0.18s;
}
.detail-article-tags .da-tag:hover { background: rgba(22, 163, 74, 0.16); }

@media (max-width: 640px) {
    .detail-article { padding: 20px 16px; border-radius: 14px; }
    .detail-article-title { font-size: 21px; }
}

/* ===== 分类「文章列表样式」区块（首页/分类页通用，由分类编辑页「首页显示样式」控制） ===== */
.nav-section--article { background: transparent; }
.nav-art-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px 4px;
}
.nav-art-item {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.nav-art-item:last-child { border-bottom: none; }
.nav-art-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.nav-art-title a { color: #1f2937; text-decoration: none; }
.nav-art-title a:hover { color: var(--wx-primary); }
.nav-art-meta {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.nav-art-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
}
@media (max-width: 640px) {
    .nav-art-title { font-size: 15px; }
    .nav-art-item { padding: 12px 2px; }
}

/* ===== 分类「紧凑图标墙样式」区块（首页/分类页通用，由分类编辑页「首页显示样式」控制） ===== */
.nav-section--compact { background: transparent; }
.nav-compact-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 2px 4px;
}
@media (max-width: 1280px) { .nav-compact-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .nav-compact-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .nav-compact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .nav-compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nav-compact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    text-align: center;
    text-decoration: none;
    color: var(--wx-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.nav-compact-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--wx-shadow-hover);
    border-color: var(--wx-primary-line);
    background: var(--wx-primary-soft);
}
.nav-compact-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--wx-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-compact-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-compact-name {
    font-size: 12px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== 点击排行榜页（template/rank.php） ==================== */
.sr-rank-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 56px;
}
.sr-rank-hero { text-align: center; margin-bottom: 26px; }
.sr-rank-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .5px;
}
.sr-rank-desc { margin: 8px 0 0; color: var(--wx-text-2); font-size: 14px; }
.sr-rank-layout {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}
/* 左：竖直 Tabs（日/周/月） */
.sr-rank-tabs {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sr-rank-tab {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--wx-border);
    background: var(--wx-surface);
    color: var(--wx-text-2);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .18s ease;
}
.sr-rank-tab:hover { border-color: var(--wx-primary-line); color: var(--wx-primary); }
.sr-rank-tab.active {
    background: var(--wx-primary);
    border-color: var(--wx-primary);
    color: #fff;
    box-shadow: var(--wx-shadow-hover);
}
/* 中：榜单列表 */
.sr-rank-list-box { min-width: 0; }
.sr-rank-panel { display: block; }
.sr-rank-list { display: flex; flex-direction: column; gap: 10px; }
.sr-rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sr-rank-item:hover {
    transform: translateY(-2px);
    border-color: var(--wx-primary-line);
    background: var(--wx-primary-soft);
    box-shadow: var(--wx-shadow-hover);
}
.sr-rank-logo {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wx-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sr-rank-logo img { width: 100%; height: 100%; object-fit: cover; }
.sr-rank-info { flex: 1 1 auto; min-width: 0; }
.sr-rank-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--wx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-rank-item:hover .sr-rank-name { color: var(--wx-primary); }
.sr-rank-intro {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--wx-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-rank-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wx-primary);
}
.sr-rank-count svg { color: var(--wx-primary); }
/* 空态（template 用 .sr-rank-empty；独立页用 .sr-empty） */
.sr-rank-empty, .sr-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--wx-text-2);
}
.sr-rank-empty-icon, .sr-empty-icon { font-size: 40px; margin-bottom: 10px; }

/* 响应式：窄屏三栏堆叠，Tabs 转横向 */
@media (max-width: 980px) {
    .sr-rank-layout { grid-template-columns: 1fr; }
    .sr-rank-tabs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sr-rank-tab { flex: 1 1 auto; text-align: center; }
}