/* OneNav 颜色选择器 - 右下角悬浮按钮 + 面板 */

/* 右下角悬浮按钮 */
.cp-float-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999998;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cp-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

/* 4色拼接四叶草图标 */
.cp-header-icon {
    width: 24px;
    height: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    overflow: visible;
}

.cp-header-icon .cp-quad {
    width: 100%;
    height: 100%;
    display: block;
}

.cp-header-icon .cp-quad:nth-child(1) {
    border-radius: 50% 0 0 0;
}
.cp-header-icon .cp-quad:nth-child(2) {
    border-radius: 0 50% 0 0;
}
.cp-header-icon .cp-quad:nth-child(3) {
    border-radius: 0 0 0 50%;
}
.cp-header-icon .cp-quad:nth-child(4) {
    border-radius: 0 0 50% 0;
}

/* 悬浮面板 */
.cp-panel {
    display: none;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    flex-direction: row;
    gap: 4px;
}

.cp-panel.cp-panel-show {
    display: flex;
    animation: cp-in 0.12s ease;
}

@keyframes cp-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cp-panel-item {
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
}

.cp-panel-item:hover {
    background: #f5f5f5;
}

.cp-panel-dot {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: block;
    transition: transform 0.15s;
    border: 1px solid rgba(0,0,0,0.1);
}

.cp-panel-item:hover .cp-panel-dot {
    transform: scale(1.1);
}

.cp-panel-item.active .cp-panel-dot {
    box-shadow: 0 0 0 2px currentColor, 0 0 4px rgba(0,0,0,0.3);
}

.cp-name {
    display: none;
}

/* ============ 详情页网站信息区卡片模式 ============ */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 {
    background: rgba(255,255,255,0.85) !important;
    -webkit-backdrop-filter: saturate(2) blur(15px) !important;
    backdrop-filter: saturate(2) blur(15px) !important;
    box-shadow: 0 5px 25px 0 rgba(0,0,0,0.1) !important;
    border-radius: 3px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 20px !important;
}
/* 夜间模式 */
.io-black-mode .cp-taxonomy-card .site-content.mb-4.mb-md-5 {
    background: rgba(30,30,30,0.85) !important;
    border-color: rgba(255,255,255,0.05) !important;
}
/* 分类标签行数控制（后台可设置） */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .terms-list {
    max-height: calc(var(--cp-terms-lines, 1) * 2.4em) !important;
    overflow: hidden !important;
}

/* ============ 详情页布局优化 ============ */
/* 标题字体加大 */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-name.h3 {
    font-size: 1.75rem !important;
}
/* 截图保持原样 */

/* ============ 详情页介绍排版美化 ============ */
.cp-taxonomy-card .panel-body.single {
    line-height: 1.8 !important;
    font-size: 15px !important;
}
/* 概括句 - 网站名称加粗，其余正常 */
.cp-taxonomy-card .panel-body.single > p:first-child strong,
.cp-taxonomy-card .panel-body.single > p:first-child b {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--main-color) !important;
}
/* 小标题（如 🛠️ 核心功能） */
.cp-taxonomy-card .panel-body.single .cp-section-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--main-color) !important;
    margin: 16px 0 8px 0 !important;
    display: inline-block !important;
}
/* 列表项 - 与原版面一致 */
.cp-taxonomy-card .panel-body.single .cp-feature-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 4px 0 12px 0 !important;
}
.cp-taxonomy-card .panel-body.single .cp-feature-list li {
    padding: 3px 0 3px 16px !important;
    position: relative !important;
    color: inherit !important;
    font-size: 16px !important;
}
.cp-taxonomy-card .panel-body.single .cp-feature-list li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--theme-color) !important;
    font-weight: bold !important;
}
/* 网站网址链接 */
.cp-taxonomy-card .panel-body.single .cp-site-link {
    color: var(--theme-color) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    word-break: break-all !important;
}
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-go {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
}
/* 收藏按钮移到手机查看后面 - 与手机查看风格一致 */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-go .cp-fav-btn-moved {
    color: var(--theme-color) !important;
    border: 1px solid var(--theme-color) !important;
    background: transparent !important;
    padding: 6px 16px !important;
    border-radius: 50rem !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}
/* 收藏按钮隐藏模式 */
.cp-fav-hidden .site-content.mb-4.mb-md-5 .io-posts-like[data-type="favorite"],
.cp-fav-hidden .site-content.mb-4.mb-md-5 .cp-fav-btn-moved {
    display: none !important;
}
/* 介绍与截图之间分隔线（横排竖线，竖排横线） */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 > .site-body {
    padding-right: 16px !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
}
.cp-taxonomy-card .site-content.mb-4.mb-md-5 > .sites-preview {
    padding-left: 16px !important;
}
.io-black-mode .cp-taxonomy-card .site-content.mb-4.mb-md-5 > .site-body {
    border-right-color: rgba(255,255,255,0.08) !important;
}
@media (max-width: 767px) {
    .cp-taxonomy-card .site-content.mb-4.mb-md-5 > .site-body {
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        padding-right: 0 !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }
    .io-black-mode .cp-taxonomy-card .site-content.mb-4.mb-md-5 > .site-body {
        border-bottom-color: rgba(255,255,255,0.08) !important;
    }
    .cp-taxonomy-card .site-content.mb-4.mb-md-5 > .sites-preview {
        padding-left: 0 !important;
        padding-top: 16px !important;
    }
}

/* ============ 面包屑导航美化 ============ */
.cp-taxonomy-card nav[aria-label="breadcrumb"] {
    font-size: 15px !important;
}

/* 网站名称与元信息之间加分隔线 */
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-name-box {
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    position: relative !important;
}
.cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-name-box::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 36px !important;
    height: 2px !important;
    background: var(--theme-color) !important;
    border-radius: 1px !important;
}
.io-black-mode .cp-taxonomy-card .site-content.mb-4.mb-md-5 .site-name-box {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* ============ 分类页配色跟随主题色 ============ */
/* 核心原理：让 .taxonomy-head-bg 跟排行页 .color-head-bg 一模一样 */

/* 1. 头部渐变 */
.cp-category-theme .taxonomy-head-bg {
    background: linear-gradient(180deg, var(--theme-color) 20%, transparent 100%) !important;
    padding-bottom: 50% !important;
    min-height: 66vh !important;
    z-index: -1 !important;
    overflow: visible !important;
    transition: 0.3s !important;
}
.io-black-mode .cp-category-theme .taxonomy-head-bg {
    background: linear-gradient(180deg, rgba(var(--theme-color-rgb), 0.6) 20%, transparent 100%) !important;
}
/* 覆盖主题的 bottom: -120px */
.cp-category-theme .taxonomy-head-fill .taxonomy-head-bg {
    bottom: 0 !important;
}

/* 2. 隐藏原始背景图片 */
.cp-category-theme .taxonomy-head-img {
    display: none !important;
}

/* 3. 给头部容器加相对定位（奖杯用） */
.cp-category-theme .taxonomy-head-body {
    position: relative !important;
}

/* 4. 分类页奖杯装饰（JS注入Img方式） */
.cp-category-trophy {
    position: absolute !important;
    top: 0 !important;
    right: -10px !important;
    width: 200px !important;
    height: 200px !important;
    transform: translateY(-76%) !important;
    z-index: -1 !important;
    opacity: 0.2 !important;
    pointer-events: none !important;
}
.io-black-mode .cp-category-trophy {
    opacity: 0.1 !important;
}

/* 5. 分类页文字颜色 */
.cp-category-theme .taxonomy-head-desc,
.cp-category-theme .taxonomy-head-count {
    color: rgba(255,255,255,0.85) !important;
}
.cp-category-theme .taxonomy-head-count.badge {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

/* 6. 内容区 .fx-header-bg 增强渐变 */
.cp-category-theme .fx-header-bg {
    background-image: linear-gradient(180deg, rgba(var(--theme-color-rgb), 0.5) 0%, var(--main-bg-color) 35%) !important;
}
.io-black-mode .cp-category-theme .fx-header-bg {
    background-image: linear-gradient(180deg, rgba(var(--theme-color-rgb), 0.3) 0%, var(--main-bg-color) 35%) !important;
}
.cp-category-theme .fx-header-bg::before {
    opacity: 0.5 !important;
}
.cp-category-theme .fx-header-bg::after {
    opacity: 0.25 !important;
}

/* 移动端 */
@media (max-width: 768px) {
    .cp-float-btn {
        width: 40px;
        height: 40px;
        right: 14px;
        bottom: 14px;
    }
    .cp-header-icon {
        width: 22px;
        height: 22px;
    }
    .cp-panel-dot {
        width: 22px;
        height: 22px;
    }
}