/**
 * WebNav 主题样式
 *
 * 一比一复刻 www.webnav.net 全网导航 UI：
 *   顶部横幅 / 毛玻璃固定头部 / 居中搜索区（Tab + 下拉引擎 + 标签）
 *   青→蓝→紫渐变双级标签栏（白色胶囊激活态 / 吸顶 / 滚动压缩）
 *   142px 卡片网格（网格/列表双布局）/ 展开查看全部 / 暗色页脚
 *
 * 纯原生 CSS，无框架依赖；改 :root 变量即可换肤
 * 移动端断点：768px
 *
 * @version 1.0.0
 */

/* ===== 主题变量 ===== */
:root {
    --theme-color: #3b82f6;
    --theme-color-hover: #2563eb;
    --text: #1f2937;
    --text-muted: #6b7280;
    --text-light: #9e9e9e;
    --body-bg: #f9fafb;
    --header-bg: rgba(255, 255, 255, .8);
    --header-border: #e5e7eb;
    --card-bg: #fff;
    --card-radius: 12px;
    --tab-active-bg: #fff;
    --bar-bg: #fff;
    --footer-bg: #1a1a1a;
    --footer-text: #ccc;
    --header-h: 53px;
    --banner-h: 0px;
}

html.dark {
    --text: #f9fafb;
    --text-muted: #9ca3af;
    --text-light: #969696;
    --header-bg: rgba(6, 10, 23, .46);
    --header-border: #1a1f2e;
    --card-bg: #242424;
    --tab-active-bg: #2a303c;
    --bar-bg: #3a3a3a;
    --footer-bg: #0f0f0f;
    --footer-text: #b3b3b3;
    --body-bg: #373737; /* webnav 暗色页面基色 */
}

/* ===== 基础 ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* 全局保底：任何元素溢出都不允许撑出页面横向滚动（clip 不创建滚动容器，sticky 不受影响；老浏览器降级 hidden） */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    --sticky-top: calc(var(--header-h) + var(--banner-h));
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease-out, color .2s ease-out;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease-out;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none;
}

img {
    border: 0;
}

::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e5edff;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

html.dark ::-webkit-scrollbar-track {
    background: #060a17;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #2a2f3e;
}

/* ===== 整体布局（仿 .default-layout） ===== */
.default-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 页面背景统一由 body 规则提供（webnav 同款 bg.jpg / darkbg.jpg），不再叠加旧渐变 */
}

html.dark .default-layout {
    /* 暗色背景同样由 html.dark body 规则提供 */
}

body[style*="background-image"] {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.layout-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: 93%;
    width: 93%;
    padding-top: calc(var(--sticky-top) + 0px);
}

/* ===== 顶部横幅（仿 .banner-carousel） ===== */
.top-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1001;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
    transition: all .3s ease;
}

.top-banner .banner-link {
    display: block;
    height: 100%;
    position: relative;
}

.top-banner .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.top-banner .close-button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: all .2s;
}

.top-banner .close-button:hover {
    background: #fff;
    color: rgba(0, 0, 0, .85);
}

body.has-banner {
    --banner-h: 60px;
}

/* ===== 头部（仿 .header 固定毛玻璃） ===== */
.site-header {
    position: fixed;
    top: var(--banner-h);
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: 999;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--header-border);
    overflow: hidden;
    transition: all .2s ease-out;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    cursor: pointer;
}

.logo-icon {
    height: 33px;
    max-height: 33px;
    width: auto;
    object-fit: contain;
    /* 白底 logo 智能去底：白色部分与背景相乘后"消失"，透明底 / 白底图均正常 */
    mix-blend-mode: multiply;
}

html.dark .logo-icon {
    /* 暗色下 multiply 会压暗图案，提亮 + 增饱和补偿（白底依旧融入暗背景） */
    mix-blend-mode: multiply;
    filter: brightness(1.4) saturate(1.5);
}

.logo-text {
    /* webnav 原站站名：品牌蓝 #3b82f6 基础上轻渐变提质感（#355AFF→#6BC6F9 取自原站图标渐变） */
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .5px;
    white-space: nowrap;
    color: #3b82f6;
    background: linear-gradient(115deg, #355aff 0%, #3b82f6 45%, #6bc6f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark .logo-text {
    background: linear-gradient(115deg, #93a8ff 0%, #60a5fa 50%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.logo-slogan {
    /* webnav 原站标语为手写艺术字图片，此处用手写体（Long Cang）复刻，楷体逐级降级 */
    font-family: 'Long Cang', 'Kaiti SC', 'STKaiti', KaiTi, '楷体', cursive;
    font-size: 18px;
    line-height: 1;
    color: #8aa4d6;
    white-space: nowrap;
    letter-spacing: 1.5px;
    transform: rotate(-1.2deg) translateY(2px);
    opacity: .92;
    user-select: none;
}

html.dark .logo-slogan {
    color: #7c95c9;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.stats-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}

.stats-link {
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease-out;
}

.stats-link:hover {
    background: rgba(59, 130, 246, .1);
    color: var(--theme-color);
    transform: translateY(-1px);
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    transition: all .2s ease-out;
}

.header-icon-btn:hover {
    background: rgba(59, 130, 246, .1);
    border-color: rgba(59, 130, 246, .2);
    color: var(--theme-color);
}

.header-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* 暗色切换按钮内的太阳/月亮 */
.dark-icon-sun {
    display: none;
}

html.dark .dark-icon-sun {
    display: block;
}

html.dark .dark-icon-moon {
    display: none;
}

/* ===== 搜索区（仿 .search-section） ===== */
.search-section {
    background: transparent;
    padding: 20px 0;
    transition: all .3s ease-out;
}

.search-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.search-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.search-tab {
    padding: 0 16px 8px;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s;
}

html.dark .search-tab {
    color: #9ca3af;
}

.search-tab:hover {
    color: var(--theme-color);
}

.search-tab.active {
    color: #0062ff;
    font-weight: 500;
}

html.dark .search-tab.active {
    color: #60a5fa;
}

.search-bar {
    position: relative;
    margin-bottom: 10px;
}

.search-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    max-width: 600px;
    height: 40px;
    margin: 0 auto;
    padding: 4px 4px 4px 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    transition: box-shadow .2s;
}

html.dark .search-input-container {
    background: #060a17;
    border: 1px solid #1a1f2e;
}

.search-input-container:focus-within {
    box-shadow: 0 4px 24px rgba(59, 130, 246, .18);
}

/* 引擎下拉选择器 */
.engine-selector {
    position: relative;
    flex-shrink: 0;
}

.engine-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
}

.engine-dropdown:hover {
    background: rgba(0, 0, 0, .04);
}

html.dark .engine-dropdown:hover {
    background: rgba(255, 255, 255, .15);
}

.selected-engine-icon {
    display: flex;
    align-items: center;
}

.selected-engine-icon svg,
.selected-engine-icon img {
    width: 25px;
    height: 25px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}

.dropdown-arrow {
    color: #000;
    transition: transform .2s;
}

html.dark .dropdown-arrow {
    color: #fff;
}

.dropdown-arrow svg {
    display: block;
}

.dropdown-arrow.rotated {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    min-width: 132px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    overflow: hidden;
    display: none;
}

.dropdown-menu.open {
    display: block;
    animation: wn-fade-in .15s ease-out;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

html.dark .dropdown-item {
    background: #060a17;
    color: #fff;
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, .08);
}

html.dark .dropdown-item:hover {
    background: rgba(255, 255, 255, .1);
}

.dropdown-item.active {
    background: var(--theme-color);
    color: #fff;
}

.dropdown-item.active:hover {
    background: var(--theme-color);
}

.dropdown-item input {
    display: none;
}

.dropdown-engine-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.dropdown-engine-icon svg,
.dropdown-engine-icon img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

/* 搜索输入框 */
.search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #1f2937;
}

html.dark .search-input {
    color: #fff;
}

.search-input::placeholder {
    color: #797979;
}

html.dark .search-input::placeholder {
    color: #9ca3af;
}

.search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 50%;
    color: #9ca3af;
    transition: all .2s ease;
}

.search-submit:hover {
    color: var(--theme-color);
    background: rgba(59, 130, 246, .08);
    transform: scale(1.06);
}

.search-submit svg {
    width: 18px;
    height: 18px;
}

/* 站内搜索清除按钮 */
.clear-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 14px;
    margin-top: 8px;
    border-radius: 100px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5%;
    transition: all .2s;
}

.clear-search-btn:hover {
    background: #f97316;
    transform: translateY(-1px);
}

.clear-search-btn.show {
    display: inline-flex;
}

/* 引擎标签（仿 .suggestion-tag） */
.search-engine-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    height: 22px;
}

.suggestion-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 22px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .14);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all .2s;
}

html.dark .suggestion-tag {
    background: rgba(255, 255, 255, .12);
}

.suggestion-tag:hover {
    background: var(--theme-color);
    transform: translateY(-1px);
}

.suggestion-tag.active {
    background: var(--theme-color);
    color: #fff;
}

.suggestion-tag input {
    display: none;
}

/* ===== 渐变双级标签栏（仿 .navigation-tabs，标志性元素） ===== */
.navigation-tabs {
    position: sticky;
    top: var(--sticky-top);
    z-index: 998;
    width: 100%;
    min-height: 56px;
    margin: 0 auto 20px; /* 与原站一致：标签栏与第一组内容间距 20px */
    padding: 6px 3px 3px;
    border-radius: 16px;
    box-sizing: border-box;
    /* webnav 原版 typebg 贴图（青→蓝→紫渐变拉伸），渐变为降级兜底 */
    background: #3b82f6 url(../img/typebg.png) no-repeat center / 100% 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: visible;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
}

.tabs-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
}

.primary-tabs-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 20px;
}

.primary-tabs {
    display: flex;
    flex: 1;
    gap: 0;
    overflow-x: auto;
    /* 顶部留白：激活胶囊（44px）高于普通标签（40px），防止被 overflow 容器裁掉顶部 */
    padding-top: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-end;
}

.primary-tabs.equal-width {
    justify-content: space-evenly;
    /* 溢出时容器内滚动（滚动条已隐藏），严禁 visible 溢出撑破页面（手机端"半边屏"根因） */
    overflow-x: auto;
}

.primary-tabs.equal-width .primary-tab {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.primary-tabs::-webkit-scrollbar {
    display: none;
}

.primary-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    height: 40px;
    min-width: 120px;
    padding: 0 12px;
    border: none;
    border-radius: 25px 25px 0 0;
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px; /* 修复原 5% 无效值 */
    text-shadow: 0 1px 4px rgba(21, 48, 105, .22); /* 渐变贴图上白字可读性 */
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s;
}

.primary-tab .tab-ico {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-tab .tab-ico svg,
.primary-tab .tab-ico img {
    width: 20px;
    height: 20px;
}

.primary-tab .tab-text {
    font-weight: 600;
    letter-spacing: .5px;
}

.primary-tab:hover {
    text-shadow: 0 1px 6px rgba(255, 255, 255, .35);
}

/* 激活态：白色胶囊贴图（webnav 原版 base64 图提取）+ 两侧外扩弧脚兜底 */
.primary-tab.active {
    position: relative;
    top: 0; /* 顶部空间由 .primary-tabs padding-top 提供（修复胶囊顶部被滚动容器裁剪） */
    height: 44px;
    color: var(--theme-color);
    text-shadow: none;
    background-color: transparent;
    background-image: url(../img/capsule.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 14px 14px 0 0;
}

html.dark .primary-tab.active {
    color: #60a5fa;
    background-image: url(../img/capsule-dark.png);
    background-size: 100% 100%;
}

.primary-tab.active .tab-flare {
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.primary-tab.active .tab-flare-l {
    left: -12px;
    background: radial-gradient(circle at 0 0, transparent 12px, var(--tab-active-bg) 12.5px);
}

.primary-tab.active .tab-flare-r {
    right: -12px;
    background: radial-gradient(circle at 100% 0, transparent 12px, var(--tab-active-bg) 12.5px);
}

/* 二级标签白条（仿 .secondary-tabs） */
.secondary-tabs-container {
    position: relative;
    z-index: 1;
}

.secondary-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 32px;
    height: 80px;
    padding: 12px 24px;
    background: var(--bar-bg);
    border-radius: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    transition: height .3s ease-out, border-radius .3s ease-out;
}

.secondary-tabs::-webkit-scrollbar {
    display: none;
}

.secondary-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 60px;
    height: 22px;
    padding: 0 10px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 5px;
    color: #6b7280;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all .2s;
}

html.dark .secondary-tab {
    color: #d1d5db;
}

.secondary-tab:hover {
    color: var(--theme-color);
    background: rgba(59, 130, 246, .1);
}

.secondary-tab.active {
    background-color: rgba(59, 130, 246, .1);
    color: var(--theme-color);
    font-weight: 500;
}

/* 滚动后的压缩模式（吸顶单行渐变条，webnav 同款 52px） */
.navigation-tabs.compact-mode {
    min-height: 46px;
    height: 46px;
    padding: 2px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.navigation-tabs.compact-mode .primary-tabs {
    padding-top: 2px; /* 压缩态同步留白，防胶囊顶部裁剪 */
}

.navigation-tabs.compact-mode .primary-tab {
    height: 34px;
    min-width: 88px;
}

.navigation-tabs.compact-mode .primary-tab.active {
    height: 38px;
}

/* ===== 标签行左右滚动箭头（webnav 原款：32px 圆钮悬浮容器外沿） ===== */
.scroll-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    background: #3a3a3af2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .2s, opacity .2s, background .2s;
    pointer-events: auto;
}

.scroll-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    background: #3a3a3a;
}

.scroll-arrow.show {
    display: flex;
}

.scroll-arrow.left-arrow {
    left: -14px;
}

.scroll-arrow.right-arrow {
    right: -14px;
}

.scroll-arrow svg {
    pointer-events: none;
}

/* ===== 内容分组区（仿 .content-sections） ===== */
.content-sections {
    background: transparent;
    width: 100%;
    max-width: 100%;
}

.content-section {
    background: transparent;
    min-height: 234px;
    margin-bottom: 30px;
    scroll-margin-top: calc(var(--sticky-top) + 145px);
}

.content-section:last-child {
    padding-bottom: 60px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.section-title .group-ico {
    display: flex;
    align-items: center;
}

.section-title .group-ico svg,
.section-title .group-ico img {
    width: 20px;
    height: 20px;
}

.section-title-text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
}

.section-title .title-hot {
    width: 22px;
    height: 22px;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s;
}

html.dark .action-btn {
    background: #060a17;
    border: 1px solid #1a1f2e;
    color: #fff;
}

.action-btn:hover {
    color: var(--text);
    transform: scale(1.05);
}

html.dark .action-btn:hover {
    background: #2a2f3e;
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* 网格/列表图标切换 */
.action-btn .ico-list {
    display: none;
}

.action-btn.is-list .ico-grid {
    display: none;
}

.action-btn.is-list .ico-list {
    display: block;
}

.collect-btn.active {
    color: #ef4444;
}

html.dark .collect-btn.active {
    color: #f87171;
}

/* ===== 卡片网格（仿 .cards-grid / .site-card） ===== */
.cards-grid {
    display: grid;
    gap: 18px;
    padding: 0 3px;
}

.cards-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
}

.site-card {
    position: relative;
    display: block;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: box-shadow .2s ease;
}

.site-card:hover,
.site-card.active {
    box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}

html.dark .site-card:hover,
html.dark .site-card.active {
    box-shadow: 0 8px 25px rgba(0, 0, 0, .5);
}

.site-card.card-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 192px;
    padding: 14px;
}

.card-icon {
    margin-bottom: 6px;
}

.icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3f6fb;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

html.dark .icon-placeholder {
    background: #333;
}

.icon-placeholder svg,
.icon-placeholder img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.icon-placeholder img {
    width: 50px;
    height: 50px;
}

.card-content {
    width: 100%;
    min-height: 54px;
    max-height: 54px;
    text-align: center;
}

.card-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    max-width: 130px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-card:hover .card-title {
    color: var(--theme-color);
}

.card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9e9e9e;
    text-align: center;
}

/* 悬停出现的小图标（仿 .icon-newWindow） */
.card-icon-item {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.site-card:hover .card-icon-item {
    display: flex;
}

.card-icon-item svg {
    width: 16px;
    height: 16px;
}

.site-card.card-grid .icon-newWindow {
    position: absolute;
    left: 6px;
    bottom: 10px;
}

/* 列表布局（仿 .card-list） */
.cards-grid.layout-list {
    grid-template-columns: repeat(auto-fill, minmax(211px, 1fr));
    gap: 12px;
}

.site-card.card-list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
    height: auto;
    min-height: 104px;
    padding: 14px 12px;
}

.site-card.card-list .card-icon {
    margin-bottom: 0;
}

.site-card.card-list .icon-placeholder {
    width: 30px;
    height: 30px;
}

.site-card.card-list .icon-placeholder svg {
    width: 18px;
    height: 18px;
}

.site-card.card-list .icon-placeholder img {
    width: 30px;
    height: 30px;
}

.site-card.card-list .card-content {
    max-height: none;
    min-height: 0;
    text-align: left;
}

.site-card.card-list .card-title {
    margin: 0 0 6px;
    text-align: left;
}

.site-card.card-list .card-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-align: left;
    line-height: 1.4;
}

/* 展开查看全部（仿 .expand-section） */
.expand-section {
    margin-top: 6px;
    text-align: center;
}

/* 兜底：折叠条若被旧版脚本误置于网格容器内，强制横跨整行且不随网格行高拉伸，避免占出一整行空白 */
.cards-grid .expand-section {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: center;
    width: 100%;
}

.expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: 20px;
    color: #6b7280;
    font-size: 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
}

.expand-btn:hover {
    color: var(--theme-color);
    transform: translateY(-1px);
}

.expand-text {
    font-weight: 500;
    white-space: nowrap;
}

.expand-icon {
    flex-shrink: 0;
    transition: transform .3s ease;
}

.expand-btn.expanded .expand-icon {
    transform: rotate(180deg);
}

/* JS 隐藏的溢出卡片 */
.card-extra-hide {
    display: none !important;
}

/* ===== 返回顶部（仿 .back-to-top-btn） ===== */
.back-to-top-btn {
    position: fixed;
    right: 1%;
    bottom: 30px;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    color: #333;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top-btn:hover {
    transform: translateY(-2px);
    color: var(--theme-color);
}

.back-to-top-btn svg {
    width: 20px;
    height: 20px;
}

html.dark .back-to-top-btn {
    background: rgba(31, 41, 55, .9);
    color: #f9fafb;
}

/* ===== 页脚（仿 .footer 暗色页脚，v3.6.3 宽松化改版） ===== */
.site-footer {
    margin-top: auto;
    padding: 56px 0 24px;
    background: var(--footer-bg);
    color: #fff;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-content {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 12px;
}

/* 栏目区：grid 均衡铺开，不再居中挤成一坨 */
.footer-columns {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 40px 72px;
}

.footer-column {
    min-width: 0;
}

.column-title {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .5px;
}

/* 标题下主色渐变短线（精致感装饰） */
.column-title::after {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    opacity: .9;
}

.footer-link {
    display: block;
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--footer-text);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}

.footer-link:hover {
    color: var(--theme-color);
    padding-left: 3px;
}

.footer-desc {
    font-size: 13.5px;
    line-height: 2.1;
    color: var(--footer-text);
    max-width: 400px;
}

/* 友情链接：双列网格（列内自适应宽度） */
.link-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-auto-flow: column;
    gap: 11px 22px;
    width: 100%;
    max-width: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list li {
    line-height: 1.5;
    min-width: 0;
}

.link-list .footer-link {
    margin-bottom: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 二维码区（仿 .qr-codes） */
.qr-codes {
    display: flex;
    flex: none;
    gap: 32px;
    margin-left: 0;
    padding-top: 4px;
}

.qr-code-item {
    text-align: center;
}

.qr-image {
    width: 84px;
    height: 84px;
    margin-bottom: 9px;
    border: 2px solid #555;
    border-radius: 8px;
    object-fit: cover;
    background: #333;
    transition: transform .2s ease;
}

.qr-image:hover {
    transform: scale(1.1);
}

.qr-label {
    margin: 0;
    font-size: 12px;
    color: var(--footer-text);
}

.footer-bottom {
    width: 100%;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #333;
    text-align: center;
}

.beian-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #888;
}

.beian-info a {
    color: #888;
}

.beian-info a:hover {
    color: #fff;
}

/* ===== 通用动画 ===== */
@keyframes wn-fade-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: wn-fade-in .3s ease-out;
}

/* ===== 移动端 768px ===== */
@media (max-width: 768px) {
    .header-container {
        padding: 0 16px;
    }

    .header-left {
        gap: 8px;
    }

    .logo-text {
        font-size: 16px;
    }

    /* 仿 webnav：移动端隐藏站名后缀（" - LyLme Spage"），短主名给手写标语让位，标语完整不裁剪 */
    .logo-name-sub {
        display: none;
    }

    .logo-slogan {
        /* 移动端保留手写体标语：站名后缀已隐藏，标语完整显示不截断；禁止 flex 压缩 */
        flex-shrink: 0;
        display: inline-block;
        font-size: 15px;
        letter-spacing: 1px;
        transform: rotate(-1deg) translateY(1px);
        opacity: .9;
        max-width: 52vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-right {
        gap: 4px;
    }

    /* 仿 webnav：移动端隐藏文字导航与部分图标 */
    .header-right .stats-link,
    .header-right .logo-slogan {
        display: none;
    }

    .layout-content {
        max-width: 95%;
        width: 95%;
    }

    .search-section {
        padding: 20px 0;
    }

    .search-container {
        padding: 0 16px;
    }

    .search-tabs {
        gap: 4px;
    }

    .search-tab {
        padding: 4px 12px 8px;
        font-size: 13px;
    }

    .search-input-container {
        max-width: 100%;
        padding: 2px 2px 2px 12px;
    }

    .search-input {
        font-size: 14px;
    }

    .search-engine-tags {
        gap: 10px;
    }

    .navigation-tabs {
        min-height: 52px;
    }

    .primary-tabs-wrapper {
        margin: 0 10px;
    }

    .primary-tabs {
        gap: 1px;
        overflow-x: auto;
    }

    /* 分类多时窄屏靠左横向滚动，禁止平分溢出（"半边屏"修复补强） */
    .primary-tabs.equal-width {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .primary-tabs.equal-width .primary-tab {
        flex: 0 0 auto;
    }

    .primary-tab {
        min-width: 88px;
        height: 36px;
        font-size: 12px;
        padding: 0 10px;
    }

    .primary-tab.active {
        height: 40px;
    }

    .secondary-tabs {
        gap: 16px;
        height: 65px;
        padding: 12px 16px;
    }

    /* 移动端箭头内嵌到渐变条两沿（防溢出，半透明弱化） */
    .scroll-arrow.left-arrow {
        left: 2px;
        opacity: .85;
    }

    .scroll-arrow.right-arrow {
        right: 2px;
        opacity: .85;
    }

    .scroll-arrow {
        width: 26px;
        height: 26px;
    }

    /* —— 移动端站点卡片：网格改为列表形式，每行 2 个 —— */
    .cards-grid.layout-grid,
    .cards-grid.layout-list {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
    }

    /* 列表形式卡片：图标左置、标题 + 描述右排（对齐原站 card-list 规格） */
    .cards-grid .site-card.card-grid,
    .cards-grid .site-card.card-list {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        height: auto;
        min-height: 0;
        padding: 12px 10px;
        border-radius: 12px;
    }

    .cards-grid .site-card.card-grid .card-icon,
    .cards-grid .site-card.card-list .card-icon {
        margin-bottom: 0;
    }

    .cards-grid .site-card.card-grid .icon-placeholder,
    .cards-grid .site-card.card-list .icon-placeholder {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    }

    .cards-grid .site-card.card-grid .icon-placeholder svg,
    .cards-grid .site-card.card-list .icon-placeholder svg {
        width: 18px;
        height: 18px;
    }

    .cards-grid .site-card.card-grid .icon-placeholder img,
    .cards-grid .site-card.card-list .icon-placeholder img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .cards-grid .site-card.card-grid .card-content,
    .cards-grid .site-card.card-list .card-content {
        max-height: none;
        min-height: 0;
        text-align: left;
    }

    .cards-grid .site-card.card-grid .card-title,
    .cards-grid .site-card.card-list .card-title {
        margin: 0 0 3px;
        font-size: 13px;
        line-height: 30px;
        max-width: none;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cards-grid .site-card.card-grid .card-description,
    .cards-grid .site-card.card-list .card-description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 11px;
        line-height: 1.35;
        text-align: left;
    }

    /* 角标（收藏/外链）收紧到卡片右上角 */
    .cards-grid .site-card .card-actions {
        right: 8px;
        top: 8px;
    }

    /* 触屏按压反馈 */
    .cards-grid .site-card:active {
        transform: scale(.97);
        transition: transform .12s ease;
    }

    /* 移动端布局固定为列表形式，隐藏网格/列表切换按钮 */
    .section-actions .layout-toggle-btn {
        display: none;
    }

    .cards-content,
    .card-content {
        min-height: 0;
    }

    .section-title {
        font-size: 16px;
    }

    .back-to-top-btn {
        right: 16px;
        bottom: 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 24px;
        width: 100%;
    }

    .link-list {
        gap: 8px 14px;
        max-width: none;
    }

    .footer-desc {
        max-width: none;
    }

    .qr-codes {
        justify-content: center;
        gap: 24px;
        margin-left: 0;
    }

    .beian-info {
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
    }
}

/* 小屏 480px：页脚栏目两列排布 + 列表卡片紧凑化 */
@media (max-width: 480px) {
    .cards-grid.layout-grid,
    .cards-grid.layout-list {
        gap: 8px;
    }

    .cards-grid .site-card.card-grid,
    .cards-grid .site-card.card-list {
        padding: 10px 9px;
        border-radius: 10px;
        column-gap: 8px;
    }

    .cards-grid .site-card.card-grid .card-title,
    .cards-grid .site-card.card-list .card-title {
        font-size: 12px;
        line-height: 28px;
    }

    .cards-grid .site-card.card-grid .icon-placeholder,
    .cards-grid .site-card.card-list .icon-placeholder,
    .cards-grid .site-card.card-grid .icon-placeholder img,
    .cards-grid .site-card.card-list .icon-placeholder img {
        width: 28px;
        height: 28px;
    }

    .footer-columns {
        gap: 24px 18px;
    }

    .footer-column {
        min-width: 0;
    }

    .column-title {
        margin-bottom: 14px;
        font-size: 15px;
    }

    .column-title::after {
        margin-top: 7px;
        width: 22px;
    }

    .footer-link {
        margin-bottom: 9px;
        font-size: 13px;
    }

    .link-list {
        grid-auto-flow: row;
        grid-template-rows: none;
        width: 100%;
    }

    .qr-codes {
        width: 100%;
        gap: 16px;
    }
}

/* 减弱动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
 * v2.0 新增：双栏布局 + 侧边访问浏览器窗 + 热榜 + 友链
 * 设计值来源：webnav.net 实测 computedStyle / CSS chunk
 * ========================================================= */

/* ===== 页面背景（webnav.net 同款：亮色顶部淡蓝渐变 / 暗色深空图，全端统一） ===== */
body {
    background-color: var(--body-bg);
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

html.dark body {
    background-image: url(../img/darkbg.jpg);
    background-color: #373737;
}

/* ===== 双栏布局：点击站点后左列收窄、右侧滑出浏览器窗 ===== */
.main-layout {
    display: flex;
    gap: 16px;
    transition: all .3s ease;
    align-items: flex-start;
}

.left-content {
    width: 100%;
    min-width: 0;
    transition: width .3s ease, flex .3s ease;
}

body.has-browser .left-content,
.main-layout.has-browser .left-content {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
    overflow: hidden;
}

/* ===== 侧边访问浏览器窗 ===== */
.right-browser {
    flex: 1 1 0;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 193px);
    min-height: 420px;
    position: sticky;
    top: calc(var(--sticky-top) + 62px);
    border-radius: 12px;
    background-image: url(../img/browserBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
    animation: vbSlideIn .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes vbSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

body.compact-mode .right-browser {
    height: calc(100vh - 124px);
}

.right-browser::-webkit-scrollbar {
    width: 6px;
}

.right-browser::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 3px;
}

/* --- 窗口顶栏 --- */
.browser-header {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    height: 40px;
    flex-shrink: 0;
    padding: 0 8px;
    font-size: 14px;
    background: #e5f3ff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.tabs-fixed-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    flex: 0 0 auto;
}

.front-back-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    height: 24px;
    position: relative;
}

.front-back-container .nav-buttons {
    width: 63px;
    height: 24px;
}

.front-back-container .nav-btn {
    position: absolute;
    top: 0;
    width: 30px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    transition: all .2s ease;
}

.front-back-container .nav-btn svg {
    width: 15px;
    height: 15px;
}

.front-back-container .back-btn {
    left: 5px;
}

.front-back-container .forward-btn {
    right: 5px;
}

.front-back-container .nav-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, .07);
    color: #1f2937;
}

.front-back-container .nav-btn:disabled {
    color: #c2ccd9;
    cursor: default;
}

.refresh-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    overflow: visible;
    background: none;
    border: none;
    cursor: pointer;
}

.refresh-container .refresh {
    width: 21px;
    height: 21px;
    padding: 5px;
    box-sizing: content-box;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .25);
    color: #555;
    margin-right: 12px;
    transition: transform .3s ease;
}

.refresh-container:hover .refresh {
    transform: rotate(180deg);
}

/* --- 标签页（浏览器梯形标签） --- */
.browser-tabs {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
}

.browser-tabs::-webkit-scrollbar {
    display: none;
}

.browser-tab {
    --tab-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 150px;
    height: 35px;
    padding: 5px;
    position: relative;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    border: none;
    background-image:
        radial-gradient(circle at 27px 10px, var(--tab-color) 12px, transparent 0),
        linear-gradient(var(--tab-color), var(--tab-color)),
        linear-gradient(var(--tab-color), var(--tab-color)),
        radial-gradient(circle at 15px 0, transparent 15px, var(--tab-color) 0);
    background-position: 0 0, bottom, bottom, -15px bottom;
    background-repeat: repeat-x, no-repeat, no-repeat, repeat-x;
    background-size: calc(100% - 54px), calc(100% - 30px) calc(100% - 12px), calc(100% - 54px) 100%, 100% 12px;
    transition: color .2s ease;
}

.browser-tab.active {
    --tab-color: #fff;
    color: #006aff;
    max-width: 200px;
    padding: 5px 20px;
    z-index: 2;
}

.browser-tab .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
}

.browser-tab .tab-icon img {
    width: 100%;
    height: 100%;
}

.browser-tab .tab-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: inherit;
}

.browser-tab .tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 2px;
    background: none;
    border: none;
    border-radius: 3px;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s ease;
}

.browser-tab .tab-close svg {
    width: 10px;
    height: 10px;
}

.browser-tab .tab-close:hover {
    background: #f3f4f6;
    color: #ef4444;
}

.browser-tab::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background-color: #d0dfeb;
    pointer-events: none;
}

.browser-tab.active::after,
.browser-tab:last-child::after,
.browser-tab.active + .browser-tab::after {
    display: none;
}

/* --- 顶栏右侧操作组 --- */
.tabs-fixed-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0 4px;
}

.tab-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s ease;
}

.tab-action-btn svg {
    width: 15px;
    height: 15px;
}

.tab-action-btn:hover,
.tab-action-btn.active {
    background: rgba(0, 0, 0, .06);
    color: #1f2937;
}

.tab-action-btn.active svg {
    fill: #f43f5e;
    stroke: #f43f5e;
}

.history-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.browser-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #ef4444;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
}

.browser-close svg {
    width: 14px;
    height: 14px;
}

.browser-close:hover {
    background: #dc2626;
    transform: scale(1.05);
}

/* --- 内容区与 iframe --- */
.browser-content {
    display: flex;
    flex: 1;
    position: relative;
    min-height: 200px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    isolation: isolate;
}

.website-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

/* --- 底部悬浮统计图表 --- */
.chart-section {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transition: height .3s ease;
}

.chart-toggle {
    position: absolute;
    top: -20px;
    right: 14px;
    width: 40px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebf9ff;
    border: 1px solid #d8dde6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s ease;
}

.chart-toggle svg {
    width: 13px;
    height: 13px;
    transition: transform .3s ease;
}

.chart-section.collapsed .chart-toggle svg {
    transform: rotate(180deg);
}

.chart-toggle:hover {
    color: #006aff;
}

.chart-section.collapsed .chart-content {
    display: none;
}

.chart-content {
    display: flex;
    width: 100%;
    height: 184px;
    min-width: 1000px;
    background: #ebf9ff;
    border-top: 1px solid #d8dde6;
    border-radius: 0 0 12px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
}

.chart-content::-webkit-scrollbar {
    height: 6px;
}

.chart-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 3px;
}

/* 左列：统计卡 + 相关推荐 */
.chart-info {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 50%;
    max-width: 520px;
    height: 100%;
    padding: 10px;
}

.chart-info-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    height: 50%;
    max-height: 78px;
}

.chart-info-top .info-item {
    min-width: 0;
}

.chart-info-top .visit-item {
    display: flex;
    flex: 0 0 46%;
    flex-direction: column;
    min-width: 200px;
    padding: 8px 16px;
    background: #fff;
    border-radius: 15px;
}

.visit-header {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 5px;
}

.visit-header .visit-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: #6b7280;
}

.visit-header .visit-title {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.visit-stats {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.visit-stat {
    display: flex;
    align-items: center;
}

.visit-stat .stat-label {
    font-size: 13px;
    color: #9eaec4;
    margin-right: 5px;
    white-space: nowrap;
}

.visit-stat .stat-value {
    font-family: "D-DIN", "DIN Alternate", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.chart-info-top .collect-item,
.chart-info-top .like-item {
    flex: 0 0 27%;
    min-width: 120px;
    max-width: 120px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.chart-info-top .collect-item {
    background-image: url(../img/collect.png);
}

.chart-info-top .like-item {
    background-image: url(../img/like.png);
}

.chart-info-top .info-item-title {
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    top: 8px;
    left: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.chart-info-top .info-item-title svg {
    width: 13px;
    height: 13px;
}

.chart-info-top .info-item-count {
    position: absolute;
    left: 6px;
    bottom: 18px;
    font-family: "D-DIN", "DIN Alternate", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.chart-info-bottom {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}

.chart-info-bottom .top-title {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
}

.chart-info-bottom .about-list {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    width: calc(100% - 30px);
}

.about-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 50px;
    height: auto;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
}

.about-item:hover {
    background-color: rgba(0, 0, 0, .05);
    transform: translateY(-1px);
}

.about-item:hover .about-item-name {
    color: #3b82f6;
}

.about-item .icon-placeholder {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.about-item:hover .icon-placeholder {
    transform: scale(1.05);
}

.about-item .icon-placeholder .lyicon,
.about-item .icon-placeholder i,
.about-item .icon-placeholder svg {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    font-size: 18px;
    object-fit: contain;
}

.about-item-name {
    width: 46px;
    font-size: 10px;
    line-height: 1.2;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右列：访问量浏览图表 */
.chart-info-right-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    min-width: 460px;
    padding: 10px;
}

.chart-info-right-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 6px;
}

.chart-info-left-top-content {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .085em;
    color: #1f2937;
}

.chart-info-right-top-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #6b7280;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-all {
    background: #f5a623;
}

.dot-pc {
    background: #2ec7c9;
}

.dot-m {
    background: #5b8ff9;
}

.chart-container {
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
}

.chart-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- 历史记录下拉 --- */
.history-dropdown {
    position: fixed;
    width: 320px;
    max-height: 400px;
    z-index: 10000;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    overflow: hidden;
    animation: historySlideIn .2s ease-out;
}

@keyframes historySlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-header {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: rgba(0, 0, 0, .02);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-clear {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    border: none;
    background: none;
}

.history-clear:hover {
    color: #ef4444;
}

.history-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    cursor: pointer;
    transition: all .2s ease;
}

.history-item:hover {
    background: rgba(0, 0, 0, .05);
}

.history-item:last-child {
    border-bottom: none;
}

.history-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
}

.history-icon img {
    width: 100%;
    height: 100%;
}

.history-content {
    flex: 1;
    min-width: 0;
    margin-right: 12px;
}

.history-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-url {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.history-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 14px;
    color: #999;
}

/* --- 访问视图暗色 --- */
html.dark .right-browser {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

html.dark .right-browser::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .35);
}

html.dark .browser-header {
    background: #3c3c3c;
}

html.dark .front-back-container .nav-btn {
    color: rgba(255, 255, 255, .8);
}

html.dark .front-back-container .nav-btn:hover:not(:disabled) {
    background: #4a4a4a;
}

html.dark .front-back-container .nav-btn:disabled {
    color: #666;
}

html.dark .refresh-container .refresh {
    background: #000;
    color: #eee;
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, .17);
}

html.dark .browser-tab {
    color: rgba(255, 255, 255, .6);
}

html.dark .browser-tab.active {
    --tab-color: #505050;
    color: #fff;
}

html.dark .browser-tab::after {
    background-color: #5a5a5a;
}

html.dark .tab-action-btn {
    color: rgba(255, 255, 255, .7);
}

html.dark .tab-action-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

html.dark .browser-close {
    background: #f87171;
}

html.dark .browser-close:hover {
    background: #ef4444;
}

html.dark .browser-content {
    background: #505050;
}

html.dark .website-iframe {
    background: #060a17;
}

html.dark .chart-toggle {
    background: #505050;
    border-color: #666;
    color: #eee;
}

html.dark .chart-content {
    background: #505050;
    border-top-color: #666;
}

html.dark .visit-item {
    background: #1f2937 !important;
    background-image: url(../img/darkOne.png) !important;
    background-size: 100% 100% !important;
}

html.dark .visit-header .visit-icon,
html.dark .visit-header .visit-title,
html.dark .visit-stat .stat-label,
html.dark .visit-stat .stat-value {
    color: #f3f4f6 !important;
}

html.dark .collect-item {
    background-image: url(../img/darkTwo.png) !important;
}

html.dark .like-item {
    background-image: url(../img/darkThree.png) !important;
}

html.dark .info-item-title,
html.dark .info-item-count,
html.dark .top-title,
html.dark .chart-info-left-top-content {
    color: #fff !important;
}

html.dark .chart-info-bottom {
    background: #424242 !important;
}

html.dark .about-item:hover {
    background-color: rgba(255, 255, 255, .1) !important;
}

html.dark .about-item:hover .about-item-name {
    color: #55a0ff !important;
}

html.dark .about-item-name {
    color: rgba(255, 255, 255, .8);
}

html.dark .chart-container {
    background: #424242;
}

html.dark .chart-info-right-top-content {
    color: rgba(255, 255, 255, .6);
}

html.dark .history-dropdown {
    background: rgba(60, 60, 60, .95);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

html.dark .history-header {
    background: rgba(255, 255, 255, .05);
    border-bottom-color: rgba(255, 255, 255, .1);
    color: #fff;
}

html.dark .history-item {
    border-bottom-color: rgba(255, 255, 255, .05);
}

html.dark .history-item:hover {
    background: rgba(255, 255, 255, .08);
}

html.dark .history-title {
    color: #fff;
}

html.dark .history-url {
    color: rgba(255, 255, 255, .7);
}

/* ===== 分组「更多」按钮（白色胶囊） ===== */
.action-btn.morebtn {
    width: 61px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 100%;
    color: #6b7280;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.action-btn.morebtn:hover {
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .18);
}

html.dark .action-btn.morebtn {
    background: #060a17;
    border: 1px solid #1a1f2e;
    color: #fff;
}

html.dark .action-btn.morebtn:hover {
    background: #2a2f3e;
}

.content-section.expanded .expand-row .expand-text .arrow {
    transform: rotate(180deg);
}

/* 分组展开行内的「更多」文字按钮（webnav 底部展开样式） */
.expand-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 100px;
    transition: all .2s ease;
}

.expand-more-btn:hover {
    color: var(--theme-color);
    background: rgba(59, 130, 246, .08);
}

/* ===== 头部「站内热榜」入口 ===== */
.stats-link.hot-entry {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.hot-entry .hot-fire {
    width: 12px;
    height: 12px;
}

.hot-entry:hover {
    color: #ff5b5b;
}

/* ===== 搜索下拉 AI 引擎首字圆形图标 ===== */
.dropdown-engine-icon.ai-icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

/* ===== 站内热榜内页（info-panel） ===== */
.info-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动：面板整体可顺滑划动 */
    overscroll-behavior: contain;
    background: #f9fafb url(../img/bg.jpg) no-repeat top center;
    background-size: 100% auto;
    animation: infoFadeIn .25s ease-out;
}

html.dark .info-panel {
    background: #373737 url(../img/darkbg.jpg) no-repeat top center;
    background-size: 100% auto;
}

@keyframes infoFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-panel-body {
    max-width: 1560px;
    margin: 0 auto;
    padding: calc(var(--sticky-top) + 16px) 24px 40px;
}

.info-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.info-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(59, 130, 246, .1);
}

.info-tab {
    padding: 6px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #192f5a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .05em;
    cursor: pointer;
    transition: all .2s ease-out;
    white-space: nowrap;
}

.info-tab:hover {
    background: rgba(0, 0, 0, .06);
}

.info-tab.active {
    background: #529aff;
    color: #fff;
    height: 32px;
}

html.dark .info-tabs {
    background: rgba(94, 94, 94, .57);
    border: 1px solid rgba(255, 255, 255, .1);
}

html.dark .info-tab {
    color: rgba(255, 255, 255, .8);
}

html.dark .info-tab.active {
    background: #529aff;
    color: #fff;
}

/* 热榜卡片双列网格 */
.cards-container {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    width: 100%;
    z-index: 1;
}

.hot-list-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 400px;
    min-height: 300px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 12px;
    padding: 16px 14px 10px;
    cursor: pointer;
    position: relative;
    transition: all .3s ease;
    z-index: 1;
    overflow: hidden;
}

.hot-list-card:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, .14);
}

.hot-list-card .card-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
    padding: 0 6px;
}

.hot-list-card .card-title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: #1d1d1d;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.hot-list-card .card-title .hot-icon,
.hot-list-card .card-header .hot-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: auto;
}

/* 列表项热度小火焰约束（img 无类名，按容器限制） */
.hot-item .item-count img {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* 分组图标 + 名称（热榜卡片标题）——图标硬性约束，防无宽高 SVG 撑爆卡片 */
.hot-list-card .card-title .g-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

.hot-list-card .card-title .g-ico svg,
.hot-list-card .card-title .g-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hot-list-card .card-title .g-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9em;
}

.hot-list-card .card-content {
    flex: 1;
    max-height: none;
    min-height: 0;
    text-align: left;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 嵌套列表惯性滚动（"划不动"修复） */
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.hot-list-card .card-content::-webkit-scrollbar {
    display: none;
}

.hot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
}

.hot-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
}

.hot-item:hover {
    background: rgba(255, 255, 255, .99);
    transform: translate(4px, 0);
}

.hot-item .item-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.hot-item .rank-icon {
    width: 20px;
    height: 20px;
}

.hot-item .rank-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #868080;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .4px;
    line-height: 140%;
}

.hot-item .item-name {
    flex: 1;
    min-width: 0;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .4px;
    line-height: 140%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-item .item-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    color: #868080;
    font-size: 10px;
    letter-spacing: .4px;
    line-height: 140%;
}

.hot-item .item-count img {
    width: 10px;
    height: 10px;
}

.hot-list-card .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px;
    color: #999;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

html.dark .hot-list-card {
    background-color: rgba(255, 255, 255, .15);
}

html.dark .hot-list-card .card-title,
html.dark .hot-item .item-name,
html.dark .hot-item .rank-number {
    color: #fff !important;
}

html.dark .hot-item .item-count {
    color: rgba(255, 255, 255, .99) !important;
}

html.dark .hot-item:hover {
    background: rgba(255, 255, 255, .12);
}

.info-panel-close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: all .2s ease;
}

.info-panel-close svg {
    width: 16px;
    height: 16px;
}

.info-panel-close:hover {
    background: #fff;
    transform: rotate(90deg);
}

html.dark .info-panel-close {
    background: rgba(60, 60, 60, .9);
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ===== 友链列表区（站名直链，v3.6.3：去掉说明卡与大卡片网格，改为简洁列表） ===== */
.friend-section {
    width: 100%;
    padding: 0 20px 28px;
    max-width: 1840px;
    margin: 0 auto;
}

.friend-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.friend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.friend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.friend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(235, 245, 255, .7));
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.friend-item {
    min-width: 0;
}

.friend-item .friend-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    font-size: 13.5px;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.8;
    transition: color .18s ease, transform .18s ease;
}

.friend-item .friend-link::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--theme-color);
    opacity: .45;
    transition: opacity .18s ease;
}

.friend-item .friend-link:hover {
    color: var(--theme-color);
    transform: translateX(2px);
}

.friend-item .friend-link:hover::before {
    opacity: 1;
}

html.dark .friend-list {
    background: linear-gradient(90deg, rgba(36, 36, 36, .9), rgba(42, 42, 42, .8));
    border-color: rgba(255, 255, 255, .06);
}

html.dark .friend-item .friend-link {
    color: #b8bfcc;
}

html.dark .friend-item .friend-link:hover {
    color: var(--theme-color);
}

/* ===== 移动端适配（≤768px） ===== */
@media (max-width: 768px) {
    /* 移动端不做侧边访问窗，点击直接新窗口打开（与 webnav 一致） */
    .right-browser {
        display: none !important;
    }

    .main-layout {
        display: block;
    }

    body.has-browser .left-content,
    .main-layout.has-browser .left-content {
        width: 100%;
        max-width: 100%;
        flex: none;
        overflow: visible;
    }

    .cards-container {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .hot-list-card {
        height: 360px;
    }

    .info-panel-body {
        padding: calc(var(--sticky-top) + 12px) 12px 32px;
    }

    .info-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .friend-section {
        padding: 0 12px 20px;
    }

    .friend-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 16px;
        padding: 12px 14px;
    }

    .friend-item .friend-link {
        font-size: 13px;
    }

    .history-dropdown {
        width: calc(100vw - 24px);
        right: 12px !important;
        left: 12px !important;
    }
}

/* hidden 属性全局兜底：防止 display:flex/grid 覆盖 hidden 语义 */
[hidden] {
    display: none !important;
}

/* ===================== AI 智能工坊入口（v3） ===================== */
/* 搜索框内 AI 按钮（input 与提交按钮之间） */
.ai-workshop-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 32px;
    margin: 0 2px 0 6px;
    padding: 0 12px 0 10px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--theme-color), #8b5cf6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .2s ease;
}
.ai-workshop-btn svg {
    width: 15px;
    height: 15px;
}
.ai-workshop-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, .45);
}
.ai-workshop-btn:active {
    transform: scale(.96);
}

/* 头部 AI 工坊链接强调色 */
.ai-workshop-link {
    color: var(--theme-color) !important;
    font-weight: 500;
}

@media (max-width: 768px) {
    .ai-workshop-btn {
        height: 30px;
        padding: 0 10px 0 8px;
        font-size: 12px;
    }
    .ai-workshop-link {
        display: none;
    }
}

/* =========================================================
 * v3.2 新增：右下角悬浮三横菜单 + 引擎本地图标
 * ========================================================= */

/* 引擎下拉本地图标（img/sou/ 域名匹配） */
.sou-ico {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
    flex-shrink: 0;
}

.dropdown-engine-wrap {
    display: inline-flex;
    align-items: center;
    width: 22px;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-engine-wrap .dropdown-engine-icon {
    width: 20px;
    height: 20px;
}

/* ===== 悬浮三横菜单（移动端主用；半透明毛玻璃小面板 + 小圆点项） ===== */
/* ===== 顶部三横下拉菜单（fixed 挂 header 正下方，全端显示） ===== */
.fab-menu {
    position: fixed;
    top: calc(var(--banner-h) + var(--header-h) + 6px);
    right: 12px;
    z-index: 1500;
}

/* header 内联三横按钮 */
.fab-toggle {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
    color: var(--theme-color);
    background: transparent;
    transition: background .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.fab-toggle:hover {
    background: rgba(59, 130, 246, .12);
}

.fab-toggle:active {
    transform: scale(.92);
}

.fab-bar {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
}

/* 展开态：三横变叉 */
.fab-menu.open .fab-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.fab-menu.open .fab-bar:nth-child(2) {
    opacity: 0;
}

.fab-menu.open .fab-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.fab-panel {
    min-width: 172px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 32px rgba(15, 30, 70, .16), inset 0 1px rgba(255, 255, 255, .7);
    transform-origin: top right;
    animation: fabIn .22s cubic-bezier(.34, 1.4, .64, 1);
}

@keyframes fabIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fab-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.fab-item:hover,
.fab-item:active {
    background: rgba(59, 130, 246, .1);
    color: var(--theme-color);
}

.fab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--theme-color);
    opacity: .55;
    flex-shrink: 0;
    transition: opacity .15s, box-shadow .15s;
}

.fab-item:hover .fab-dot {
    opacity: 1;
    box-shadow: 0 0 6px var(--theme-color);
}

.fab-item-dark .fab-moon {
    margin-left: auto;
    color: var(--theme-color);
}

html.dark .fab-panel {
    background: rgba(24, 30, 48, .86);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .08);
}

html.dark .fab-toggle {
    color: #9ec3ff;
}

html.dark .fab-toggle:hover {
    background: rgba(96, 165, 250, .16);
}

/* 移动端：面板通宽下拉 + 月亮按钮收进菜单 */
@media (max-width: 768px) {
    .fab-menu {
        right: 10px;
    }

    .fab-panel {
        min-width: 0;
        width: calc(100vw - 20px);
        max-width: 300px;
        max-height: 62vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 月亮按钮收进菜单（header 右侧不再重复显示） */
    .header-right .header-icon-btn {
        display: none;
    }
}

/* ===================== 矩阵推荐位（友链区"荐"条目高亮卡片，v3.6.10） ===================== */
.friend-item.wb-rec {
    width: 100%;
    margin: 6px 0;
}
.friend-item.wb-rec .friend-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary, #3b82f6) 7%, transparent);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-main, var(--text-muted, inherit));
    line-height: 1.5;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.friend-item.wb-rec .friend-link:hover {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 4px 14px rgba(59, 130, 246, .16);
    transform: translateY(-1px);
    color: var(--primary, #3b82f6);
}
.friend-item.wb-rec .wb-rec-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.friend-item.wb-rec .wb-rec-desc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #8b94a3);
}
/* 暗色模式适配 */
body.dark .friend-item.wb-rec .friend-link {
    background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
    color: var(--text-main, #dfe4ea);
}
body.dark .friend-item.wb-rec .wb-rec-desc {
    color: var(--text-muted, #7c8694);
}