/*
 * @Author: iowen
 * @Author URI: https://www.iowen.cn/
 * @Date: 2024-01-03 00:15:11
 * @LastEditors: iowen
 * @LastEditTime: 2024-01-13 11:05:39
 * @FilePath: \onenavsub\assets\css\sub-style.css
 * @Description: 自定义样式 — 含自定义导航小工具样式
 */

/* ==========================================
 * 钉钉进步体 — 本地加载
 * ========================================== */
@font-face {
    font-family: 'DingTalkJinBuTi';
    src: url('../fonts/DingTalkJinBuTi.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 全站默认字体使用钉钉进步体（覆盖 OneNav 主题 main.css 的 body font-family） */
body {
    font-family: 'DingTalkJinBuTi', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ==========================================
 * 顶部导航激活状态：背景色填充圆角标签（替代下划线指示器）
 * ========================================== */

/* 激活项：背景色填充 + 白色文字 + 圆角药丸形状 */
.main-header.header-fixed .header-nav .navbar-header li.current-menu-item > a {
    background: var(--theme-color, var(--focus-color, #f1404b)) !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 6px 18px;
    margin: 7px 4px;
}

/* 隐藏原来的底部小圆点指示器 */
.main-header.header-fixed .header-nav .navbar-header li.current-menu-item::after {
    display: none !important;
}

/* 非激活项 hover：轻微背景色，保持视觉圆润 */
.main-header.header-fixed .header-nav .navbar-header li:not(.current-menu-item) > a:hover {
    background: var(--muted-bg-a-color, rgba(136, 136, 136, 0.12)) !important;
    border-radius: 20px;
}

/* ==========================================
 * 顶部导航激活状态：背景色填充圆角标签（替代下划线指示器）结束
 * ========================================== */

/* ==========================================
 * 自定义导航小工具
 * ========================================== */

.io-custom-nav.user-custome-style {
    position: relative;
    margin-bottom: 1.5rem;
}

/** 内容卡片容器 */
.io-custom-nav.user-custome-style .user-custome {
    background: var(--main-bg-color, #fff);
    border-radius: var(--main-radius, 12px);
    box-shadow: 0 5px 20px var(--main-shadow, rgba(0, 0, 0, 0.1));
    padding: 16px 18px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* 侧边栏内透明 */
.card > .io-custom-nav.user-custome-style .user-custome,
.io-sidebar-widget .io-custom-nav.user-custome-style .user-custome {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ==========================================
 * Tab 标题 + 分类标签栏
 * ========================================== */

.io-custom-nav .io-slider-tab {
    position: relative;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

.io-custom-nav .io-slider-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--muted-bg-a-color, rgba(136, 136, 136, 0.15));
}

.io-custom-nav .io-slider-tab .tab-title {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.io-custom-nav .io-slider-tab .tab-title .site-tag {
    color: var(--theme-color, #f1404b);
    font-size: 1.1rem;
}

/* 分类标签滑块 */
.io-custom-nav .slider-tab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 2px;
}

.io-custom-nav .slider-tab::-webkit-scrollbar { display: none; }

.io-custom-nav .slider-tab .slider-li {
    flex-shrink: 0;
    padding: 0.2rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--main-color, #484b4f);
    background: transparent;
    white-space: nowrap;
    user-select: none;
    line-height: 1.6;
}

.io-custom-nav .slider-tab .slider-li:hover {
    background: var(--muted-bg-a-color, rgba(136, 136, 136, 0.08));
    color: var(--theme-color, #f1404b);
}

.io-custom-nav .slider-tab .slider-li.active {
    background: var(--theme-color, #f1404b);
    color: #fff !important;
    font-weight: 500;
}

/* 标签栏右侧伸缩占位 */
.io-custom-nav .tab-to-more {
    min-width: 8px;
}

/* ==========================================
 * 编辑按钮组
 * ========================================== */

.io-custom-nav .io-nav-edit-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    margin-left: 8px;
}

.io-custom-nav .io-nav-edit-wrapper .btn {
    padding: 0.2rem 0.65rem;
    border-radius: 14px;
    font-size: 0.75rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
    display: inline-block;
}

.io-custom-nav .io-nav-edit,
.io-custom-nav .io-nav-edit-wrapper .vc-l-theme {
    background: var(--theme-color, #f1404b);
    color: #fff !important;
    border: 1px solid var(--theme-color, #f1404b);
}

.io-custom-nav .io-nav-edit:hover {
    filter: brightness(0.9);
    color: #fff !important;
}

.io-custom-nav .io-nav-done,
.io-custom-nav .io-nav-edit-wrapper .vc-l-green {
    background: #27ae60;
    color: #fff !important;
    border: 1px solid #27ae60;
}

.io-custom-nav .io-nav-rename-cat,
.io-custom-nav .io-nav-edit-wrapper .vc-l-blue {
    background: #3498db;
    color: #fff !important;
    border: 1px solid #3498db;
}

.io-custom-nav .io-nav-delete-cat,
.io-custom-nav .io-nav-edit-wrapper .vc-l-red {
    background: #e74c3c;
    color: #fff !important;
    border: 1px solid #e74c3c;
}

.io-custom-nav .io-nav-edit-wrapper .vc-l-gray {
    background: #7f8c8d;
    color: #fff !important;
    border: 1px solid #7f8c8d;
}

/* ==========================================
 * Tab 内容面板
 * ========================================== */

.io-custom-nav .tab-content {
    margin-top: 0.25rem;
}

.io-custom-nav .tab-pane {
    display: none;
}
.io-custom-nav .tab-pane.active.show {
    display: block;
}

/* 空状态 (welcome) */
.io-custom-nav .io-nav-welcome-add {
    text-align: center;
    padding: 1.5rem;
}

.io-custom-nav .io-nav-welcome-add-btn {
    background: var(--theme-color, #f1404b);
    color: #fff !important;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.io-custom-nav .io-nav-welcome-add-btn:hover {
    opacity: 0.85;
    color: #fff !important;
}

/* 空状态（分类无数据） */
.io-custom-nav .nothing-box .nothing {
    text-align: center;
    color: var(--muted-color, #999);
    padding: 2rem 0;
    font-size: 0.875rem;
}

.io-custom-nav .nothing-box .nothing-svg {
    width: 80px;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

/* ==========================================
 * 网址卡片 — CSS Grid 等宽自适应，自动换行列
 * ========================================== */

.io-custom-nav .io-nav-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
}

.io-custom-nav .io-nav-site-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--main-bg-color, #fff);
    border-radius: 8px;
    padding: 6px 8px;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
    min-height: 34px;
    box-shadow: 0 0 0 2px var(--card-accent, var(--muted-bg-a-color, rgba(136, 136, 136, 0.15))),
                0 1px 3px var(--main-shadow, rgba(0, 0, 0, 0.04));
}

.io-custom-nav .io-nav-site-item:hover {
    box-shadow: 0 0 0 1px var(--theme-color, #f1404b),
                0 2px 8px -2px var(--main-shadow, rgba(0, 0, 0, 0.08));
}

.io-custom-nav .io-nav-site-item .sites-body {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
    color: var(--main-color, #484b4f);
    padding: 0;
    min-width: 0;
}

.io-custom-nav .io-nav-site-item .sites-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.io-custom-nav .io-nav-site-item .item-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--main-color, #484b4f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin: 0;
}

/* 删除按钮 */
.io-custom-nav .io-nav-site-item .io-nav-site-delete {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: #fff !important;
    border-radius: 50%;
    font-size: 9px;
    z-index: 10;
    text-decoration: none !important;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.io-custom-nav .io-nav-site-item .io-nav-site-delete:hover {
    transform: scale(1.3);
    color: #fff !important;
}

.io-custom-nav .io-nav-site-item.edit-mode .sites-body {
    cursor: default;
}

/* 拖拽状态 */
.io-custom-nav .io-nav-site-item.io-nav-dragging {
    opacity: 0.4;
    border-style: dashed;
}

.io-custom-nav .slider-li.io-nav-drop-target {
    background: var(--theme-color, #f1404b) !important;
    color: #fff !important;
    transform: scale(1.05);
}

/* 分类拖拽排序状态 */
.io-custom-nav .slider-li.io-nav-cat-draggable {
    cursor: grab;
}
.io-custom-nav .slider-li.io-nav-cat-draggable:active {
    cursor: grabbing;
}
.io-custom-nav .slider-li.io-nav-dragging-cat {
    opacity: 0.4;
    background: var(--muted-bg-a-color, rgba(136, 136, 136, 0.15));
}

/* 站点拖拽排序指示器 */
.io-custom-nav .io-nav-site-item.io-nav-drop-before {
    position: relative;
}
.io-custom-nav .io-nav-site-item.io-nav-drop-before::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 15%;
    right: 15%;
    height: 4px;
    background: var(--theme-color, #f1404b);
    border-radius: 2px;
    z-index: 11;
    pointer-events: none;
}

/* ==========================================
 * 编辑提示行
 * ========================================== */

.io-custom-nav .io-nav-edit-hints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--muted-color, #93959a);
    padding: 4px 0;
}

.io-custom-nav .io-nav-edit-hints .io-nav-drag-hint,
.io-custom-nav .io-nav-edit-hints .io-nav-rightclick-hint {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ==========================================
 * 添加卡片按钮 — 填充满网格单元格
 * ========================================== */

.io-custom-nav .io-nav-add-card {
    display: flex;
}

.io-custom-nav .io-nav-add-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--main-blur-bg-color, rgba(245, 245, 245, 0.75));
    border: 2px dashed var(--muted-bg-a-color, rgba(136, 136, 136, 0.25));
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    color: var(--main-color, #888);
    font-size: 1.3rem;
    font-weight: 300;
    text-decoration: none !important;
    line-height: 1;
    padding: 6px 0;
}

.io-custom-nav .io-nav-add-card a:hover {
    background: rgba(241, 64, 75, 0.08);
    border-color: var(--theme-color, #f1404b);
    color: var(--theme-color, #f1404b);
    text-decoration: none !important;
}

/* ==========================================
 * Modal 通用
 * ========================================== */

.io-nav-modal .modal-title {
    font-weight: 600;
    font-size: 1rem;
}

.io-nav-modal .text-sm {
    font-size: 0.8125rem;
}

.io-nav-modal .form-group {
    margin-bottom: 0.75rem;
}

.io-nav-modal .form-group label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--main-color, #484b4f);
}

/* 底部按钮 */
.io-nav-modal .btn-outline {
    padding: 0.35rem 1.2rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    transition: all 0.2s;
}

.io-nav-modal .vc-l-theme.btn-outline {
    background: var(--theme-color, #f1404b);
    color: #fff !important;
    border: 1px solid var(--theme-color, #f1404b);
}

.io-nav-modal .vc-l-red.btn-outline {
    background: #e74c3c;
    color: #fff !important;
    border: 1px solid #e74c3c;
}

/* ==========================================
 * 导入书签
 * ========================================== */

.io-nav-import-file-area {
    text-align: center;
    padding: 1rem 0;
}

.io-nav-import-file-area .btn-outline-primary {
    background: var(--muted-bg-a-color, rgba(136,136,136,0.08));
    border: 2px dashed var(--muted-bg-a-color, rgba(136,136,136,0.3));
    color: var(--main-color, #484b4f);
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.io-nav-import-file-area .btn-outline-primary:hover {
    border-color: var(--theme-color, #f1404b);
    color: var(--theme-color, #f1404b);
    background: rgba(241, 64, 75, 0.06);
}

/* ==========================================
 * 暗色模式
 * ========================================== */

.io-black-mode .io-custom-nav.user-custome-style .user-custome {
    background: var(--main-bg-color, #2D2E2F);
}

.io-black-mode .io-custom-nav .io-nav-site-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.io-black-mode .io-custom-nav .io-nav-site-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.io-black-mode .io-custom-nav .io-nav-site-item:hover {
    border-color: var(--theme-color, #f1404b);
    background: rgba(241, 64, 75, 0.08);
}

.io-black-mode .io-custom-nav .io-nav-site-item .item-title {
    color: var(--main-color, #e0e0e0);
}

.io-black-mode .io-custom-nav .io-nav-add-card a {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #aaa;
}

.io-black-mode .io-custom-nav .io-nav-add-card a:hover {
    background: rgba(241, 64, 75, 0.12);
    border-color: var(--theme-color, #f1404b);
    color: var(--theme-color, #f1404b);
}

/* ==========================================
 * 响应式
 * ========================================== */

/* 桌面端：更大卡片 */
@media (min-width: 992px) {
    .io-custom-nav .io-nav-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .io-custom-nav .user-custome {
        padding: 12px 10px;
    }

    .io-custom-nav .io-slider-tab {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center !important;
    }

    .io-custom-nav .io-slider-tab .tab-title {
        font-size: 0.85rem;
        flex-shrink: 0;
        margin-right: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    .io-custom-nav .slider-tab {
        margin-top: 0 !important;
        flex: 1;
    }

    .io-custom-nav .io-nav-edit-wrapper {
        margin-left: 4px;
    }

    .io-custom-nav .io-nav-edit-wrapper .btn {
        padding: 0.15rem 0.5rem;
        font-size: 0.7rem;
    }

    .io-custom-nav .io-nav-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 5px;
    }

    .io-custom-nav .io-nav-site-item {
        min-height: 30px;
        padding: 4px 6px;
    }

    .io-custom-nav .io-nav-site-item .sites-icon {
        width: 16px;
        height: 16px;
    }

    .io-custom-nav .io-nav-site-item .item-title {
        font-size: 0.7rem;
    }

    .io-custom-nav .io-nav-add-card a {
        padding: 5px 0;
        font-size: 1.1rem;
    }
}

/* ==========================================
 * 右键上下文菜单
 * ========================================== */

.io-custom-nav-context-menu {
    position: fixed;
    z-index: 99999;
    min-width: 180px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    font-size: 13px;
    animation: ioContextMenuFadeIn 0.15s ease;
}

@keyframes ioContextMenuFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.io-custom-nav-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.io-custom-nav-context-menu li {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    transition: background 0.15s ease;
    user-select: none;
}

.io-custom-nav-context-menu li:hover {
    background: rgba(241, 64, 75, 0.08);
    color: var(--theme-color, #f1404b);
}

.io-custom-nav-context-menu li.disabled {
    color: #aaa;
    cursor: default;
}

.io-custom-nav-context-menu li.disabled:hover {
    background: transparent;
    color: #aaa;
}

.io-custom-nav-context-menu li i {
    font-size: 14px;
}

/* 暗色模式 */
.io-black-mode .io-custom-nav-context-menu {
    background: #2D2E2F;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.io-black-mode .io-custom-nav-context-menu li {
    color: #ccc;
}

.io-black-mode .io-custom-nav-context-menu li:hover {
    background: rgba(241, 64, 75, 0.15);
    color: var(--theme-color, #f1404b);
}

.io-black-mode .io-custom-nav-context-menu li.disabled {
    color: #666;
}

.io-black-mode .io-custom-nav-context-menu li.disabled:hover {
    background: transparent;
    color: #666;
}

/* ==========================================
 * 工具箱导航页 - webtool/index.php
 * ========================================== */

.io-webtool-page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.io-webtool-card {
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--muted-bg-a-color, rgba(136,136,136,0.12));
    border-radius: var(--main-radius, 12px);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px var(--main-shadow, rgba(0,0,0,0.06));
    height: 100%;
}

.io-webtool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px var(--main-shadow, rgba(0,0,0,0.12));
    border-color: var(--theme-color, #f1404b);
}

.io-webtool-card-icon {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 0.625rem;
}

.io-webtool-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--main-color, #484b4f);
    margin-bottom: 0.375rem;
}

.io-webtool-card-desc {
    font-size: 0.8125rem;
    color: var(--muted-color, #93959a);
    margin-bottom: 0;
    line-height: 1.4;
}

/* 暗色模式 */
.io-black-mode .io-webtool-card {
    background: var(--main-bg-color, #2D2E2F);
}

.io-black-mode .io-webtool-card:hover {
    border-color: var(--theme-color, #f1404b);
}

/* ==========================================
 * 全站卡片悬浮效果
 * hover 时上浮 + 主题色边框 + 阴影加深
 * ========================================== */

/* 站点 / 网址卡片 */
.posts-item {
    transition: all 0.3s ease !important;
    position: relative;
    box-shadow: 0 0 0 3px var(--card-accent, transparent) !important;
}

.posts-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 0 3px var(--card-accent, transparent), 0 16px 32px -8px var(--main-shadow, rgba(0,0,0,0.18)) !important;
    z-index: 2;
}

/* 应用卡片 */
.app-item,
.app-screenshot-item {
    transition: all 0.3s ease !important;
    position: relative;
}

.app-item:hover,
.app-screenshot-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 16px 32px -8px var(--main-shadow, rgba(0,0,0,0.18)) !important;
    z-index: 2;
}

/* 书签卡片 */
.book-item,
.book-card-item {
    transition: all 0.3s ease !important;
    position: relative;
}

.book-item:hover,
.book-card-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 16px 32px -8px var(--main-shadow, rgba(0,0,0,0.18)) !important;
    z-index: 2;
}

/* 文章 / 公告卡片 */
.post-item,
.post-card {
    transition: all 0.3s ease !important;
    position: relative;
}

.post-item:hover,
.post-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 16px 32px -8px var(--main-shadow, rgba(0,0,0,0.18)) !important;
    z-index: 2;
}

/* 截图 / 通用卡片 */
.screenshot-item,
.new-ability-card {
    transition: all 0.3s ease !important;
    position: relative;
}

.screenshot-item:hover,
.new-ability-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--theme-color, #f1404b) !important;
    box-shadow: 0 16px 32px -8px var(--main-shadow, rgba(0,0,0,0.18)) !important;
    z-index: 2;
}

/* 暗色模式 */
.io-black-mode .posts-item:hover,
.io-black-mode .app-item:hover,
.io-black-mode .book-item:hover,
.io-black-mode .post-item:hover,
.io-black-mode .new-ability-card:hover,
.io-black-mode .screenshot-item:hover {
    box-shadow: 0 0 0 3px var(--card-accent, transparent), 0 16px 32px -8px rgba(0,0,0,0.5) !important;
}

/* ==========================================
 * 页脚社交按钮 hover 主题色效果（与卡片一致）
 * ========================================== */

.social-btn {
    transition: all 0.3s ease !important;
}

.social-btn:hover {
    background: var(--theme-color, #f1404b) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.social-btn:hover i,
.social-btn:hover .iconfont {
    color: #fff !important;
}

/* 页脚链接 hover 变主题色（从中间一条线纵向展开成胶囊） */
.footer-links a,
.friend-link a,
.footer-copyright a {
    position: relative !important;
    z-index: 1 !important;
    padding: 2px 6px !important;
    margin: 0 2px;
    border-radius: 6px;
    line-height: 1.4 !important;
    transition: color 0.3s !important;
}

.footer-links a::after,
.friend-link a::after,
.footer-copyright a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: 6px;
    z-index: -1 !important;
    transform: scaleY(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.footer-links a:hover::after,
.friend-link a:hover::after,
.footer-copyright a:hover::after {
    transform: scaleY(1) !important;
}

.footer-links a:hover,
.friend-link a:hover,
.footer-copyright a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* ==========================================
 * 分类 Tab 按钮 hover 主题色动画
 * 从中间一条线纵向展开成胶囊
 * ========================================== */

/* Tab 按钮：准备伪元素容器 */
.tab-item,
.slider-li {
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.3s !important;
    cursor: pointer;
}

/* 伪元素：初始为 scaleY(0) 即中间一条不可见线 */
.tab-item::before,
.slider-li::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: var(--cp-tab-hover-radius, 6px);
    z-index: -1 !important;
    transform: scaleY(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* hover 时纵向展开 + 白字 */
.tab-item:hover::before,
.slider-li:hover::before {
    transform: scaleY(1) !important;
}

.tab-item:hover,
.slider-li:hover {
    color: #fff !important;
}

/* Tab 内图标同步变白 */
.tab-item:hover .iconfont,
.tab-item:hover i,
.slider-li:hover .iconfont,
.slider-li:hover i {
    color: #fff !important;
}

/* ==========================================
 * 移动端适配 - webtool 导航页
 * ========================================== */
@media (max-width: 768px) {
    .io-webtool-root .io-webtool-page {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    
    .io-webtool-root .io-webtool-page .text-center h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .io-webtool-root .io-webtool-page .text-center p {
        font-size: 0.875rem;
        margin-bottom: 0;
    }
    
    .io-webtool-root .io-webtool-card {
        padding: 1rem 0.75rem;
        border-radius: 0.75rem;
    }
    
    .io-webtool-root .io-webtool-card-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .io-webtool-root .io-webtool-card-title {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }
    
    .io-webtool-root .io-webtool-card-desc {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    /* 网格间距调整 */
    .io-webtool-root .gx-3 {
        gap: 0.75rem;
    }
    
    .io-webtool-root .mb-3 {
        margin-bottom: 0.75rem !important;
    }
}

/* ==========================================
 * 推广栏 — 搜索模块下方推广链接
 * ========================================== */

/* CSS 变量定义：直接在容器上声明，确保 fallback 值生效 */
.hotbar-grid {
    --wrapBg: rgba(130,130,130,.15);
    --cardBg: #fff;
    --text: #1f2937;
    --r: 10px;
    --icon: 24px;
    --gap: 10px;
    --b1: #f9c74f;
    --b2: #38c172;
    --b3: #ef4444;
    --b4: #3b82f6;
    --b5: #fb923c;
    --b6: #9333ea;
    --b7: #14b8a6;
    --b8: #f97316;
    --b9: #eab308;
    --b10: #22c55e;

    display: flex;
    align-items: center;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    padding: 6px 16px;
    margin: 0 auto;
    background: var(--wrapBg);
    border-radius: 12px;
    overflow-x: auto;
}
.hotbar-grid::-webkit-scrollbar { display: none; }

.hotbar-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    background: var(--cardBg);
    border-radius: var(--r);
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    transform: translateY(0);
}
/* 10 色循环边框 — 使用 !important 避免主题默认 a 标签样式覆盖 */
.hotbar-card:nth-child(1)  { border: 2px solid var(--b1) !important; }
.hotbar-card:nth-child(2)  { border: 2px solid var(--b2) !important; }
.hotbar-card:nth-child(3)  { border: 2px solid var(--b3) !important; }
.hotbar-card:nth-child(4)  { border: 2px solid var(--b4) !important; }
.hotbar-card:nth-child(5)  { border: 2px solid var(--b5) !important; }
.hotbar-card:nth-child(6)  { border: 2px solid var(--b6) !important; }
.hotbar-card:nth-child(7)  { border: 2px solid var(--b7) !important; }
.hotbar-card:nth-child(8)  { border: 2px solid var(--b8) !important; }
.hotbar-card:nth-child(9)  { border: 2px solid var(--b9) !important; }
.hotbar-card:nth-child(10) { border: 2px solid var(--b10) !important; }

/* hover 时保留彩色边框不变色，背景保持白色不透明 */
.hotbar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
/* 强制图标大小 — 用 !important 确保不被主题 img 规则覆盖 */
.hotbar-card img {
    width: var(--icon) !important;
    height: var(--icon) !important;
    min-width: var(--icon) !important;
    min-height: var(--icon) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.hotbar-card .card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    line-height: 1;
}

/* 深色模式适配 */
.io-black-mode .hotbar-grid {
    --wrapBg: rgba(80,80,80,.35);
    --cardBg: rgba(40,40,40,.85);
    --text: #f3f4f6;
}
.io-black-mode .hotbar-card .card-name {
    color: var(--text);
}

/* 中等屏幕：自适应转换为两行五列（10个卡片分两行） */
@media (max-width: 1200px) {
    .hotbar-grid {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }
    .hotbar-card {
        flex: 0 0 calc(20% - 8px);
        min-width: 0;
    }
}

/* 小屏幕：隐藏推广栏 */
@media (max-width: 768px) {
    .hotbar-grid { display: none !important; }
}
/* ===== 推广栏结束 ===== */

/* ==========================================
 * IO 宫格卡片小工具 — grid-cards-widget
 * 固定10宫格，两行五列，移动端隐藏
 * ========================================== */

.io-grid-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.io-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px 5px 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    cursor: pointer;
    text-decoration: none !important;
    color: #333;
    text-align: center;
    flex-grow: 1;
    flex-basis: calc(10% - 8px);
    aspect-ratio: 1;
}

.io-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.5);
    color: #333;
}

.io-grid-card:active {
    transform: translateY(2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.7);
}

.io-grid-card .io-grid-card-icon {
    flex: 1;
    width: auto !important;
    height: auto !important;
    max-width: 70% !important;
    max-height: 70% !important;
    object-fit: contain;
    display: block;
    margin-bottom: 2px;
}

.io-grid-card .io-grid-card-label {
    margin-top: auto;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .io-grid-card .io-grid-card-icon { max-width: 65% !important; max-height: 65% !important; }
    .io-grid-card .io-grid-card-label { font-size: 11px; }
}

@media (max-width: 480px) {
    .io-grid-card .io-grid-card-icon { max-width: 60% !important; max-height: 60% !important; }
    .io-grid-card .io-grid-card-label { font-size: 10px; }
}

/* 暗色模式适配 */
.io-black-mode .io-grid-card {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
}
.io-black-mode .io-grid-card:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

/* ==========================================
 * 面包屑导航美化
 * ========================================== */

/* 面包屑容器 */
nav[aria-label="breadcrumb"] {
    --cp-breadcrumb-opacity: 0.92;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100%;
    padding: 10px 16px !important;
    margin-bottom: 1.5rem !important;
    background: rgba(255, 255, 255, var(--cp-breadcrumb-opacity, 0.03)) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 1.5;
    box-sizing: border-box;
}

/* 面包屑链接 */
nav[aria-label="breadcrumb"] a.crumbs,
nav[aria-label="breadcrumb"] a {
    color: var(--main-color, #484b4f);
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 2px 6px !important;
    border-radius: 6px;
    transition: color 0.3s !important;
}

/* 伪元素：初始为 scaleY(0) 即中间一条不可见线 */
nav[aria-label="breadcrumb"] a.crumbs::before,
nav[aria-label="breadcrumb"] a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--theme-color, #f1404b) !important;
    border-radius: 6px;
    z-index: -1 !important;
    transform: scaleY(0) !important;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* hover 时纵向展开 + 白字 */
nav[aria-label="breadcrumb"] a.crumbs:hover::before,
nav[aria-label="breadcrumb"] a:hover::before {
    transform: scaleY(1) !important;
}

nav[aria-label="breadcrumb"] a.crumbs:hover,
nav[aria-label="breadcrumb"] a:hover {
    color: #fff !important;
}

/* 分隔符统一样式 */
nav[aria-label="breadcrumb"] .text-color,
nav[aria-label="breadcrumb"] .text-danger,
nav[aria-label="breadcrumb"] i.text-color,
nav[aria-label="breadcrumb"] i.text-danger {
    color: var(--muted-color, #93959a) !important;
    font-size: 15px !important;
    padding: 0 4px !important;
}

/* 当前页面文字 */
nav[aria-label="breadcrumb"] span[aria-current="page"] {
    color: var(--main-color, #484b4f);
    font-weight: 400;
}

/* 首页图标 */
nav[aria-label="breadcrumb"] .icon-home {
    color: var(--muted-color, #93959a);
    font-size: 15px;
    margin-right: 4px;
}

/* 暗色模式 */
.io-black-mode nav[aria-label="breadcrumb"] {
    --cp-breadcrumb-opacity: 0.15;
    background: rgba(255, 255, 255, var(--cp-breadcrumb-opacity)) !important;
}

.io-black-mode nav[aria-label="breadcrumb"] a.crumbs,
.io-black-mode nav[aria-label="breadcrumb"] a {
    color: var(--main-color, #e0e0e0);
}

.io-black-mode nav[aria-label="breadcrumb"] a.crumbs:hover,
.io-black-mode nav[aria-label="breadcrumb"] a:hover {
    color: var(--theme-color, #f1404b);
}

/* ==========================================
 * 网址详情页内容区域背景框（h139.com 风格）
 * ========================================== */

/* 主内容容器 */
.d-flex.site-content,
.d-flex.flex-column.site-content,
.d-flex.flex-column.flex-md-row.site-content {
    --cp-site-content-opacity: 0.92;
    background: rgba(255, 255, 255, var(--cp-site-content-opacity)) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-sizing: border-box;
    margin-bottom: 1.5rem !important;
}

/* 响应式：大屏幕也保持 1.5rem 间距 */
@media (min-width: 768px) {
    .d-flex.site-content,
    .d-flex.flex-column.site-content,
    .d-flex.flex-column.flex-md-row.site-content {
        margin-bottom: 1.5rem !important;
    }
}

/* 详细内容面板 */
.panel.site-content.card {
    margin-bottom: 1.5rem !important;
}

/* 网址信息区域 */
.site-body {
    padding: 0;
    padding-right: 16px;
}

/* 桌面端：右边框分隔线 */
@media (min-width: 768px) {
    .site-body {
        border-right: 1px solid var(--muted-bg-a-color, rgba(136, 136, 136, 0.15)) !important;
        padding-right: 16px;
    }

    .sites-preview {
        padding-left: 16px;
    }
}

/* 预览区域 */
.sites-preview {
    padding: 0;
}

/* 暗色模式 */
.io-black-mode .site-content {
    --cp-site-content-opacity: 0.15;
    background: rgba(255, 255, 255, var(--cp-site-content-opacity)) !important;
}

/* ==========================================
 * 网址详情页头部渐变背景
 * ========================================== */
body.single.cp-detail-bg {
    background: linear-gradient(180deg, rgba(var(--theme-color-rgb), var(--cp-gradient-opacity, 0.5)) 0%, rgba(var(--theme-color-rgb), var(--cp-gradient-end-opacity, 0)) var(--cp-gradient-height, 50%)) !important;
    background-attachment: fixed !important;
    background-color: #F2F4F7 !important;
}