/* 主题样式 (dark-1) */
/*---------------------------------      根变量 & 全局样式     ---------------------------------*/

:root {
    --primary-color: #4fc08d;
    --secondary-color: #667eea;
    --accent-color: #ffca00;
    --bg-color: #181818;
    --card-bg: #2a2a2a;
    --text-color: #e0e0e0;
    --border-radius: 8px;
    --transition-speed: 0.3s;
    --primary-color-hover: #ffffff;
    --primary-color-active: #ffffff;
}

/* 亮色主题变量 */
:root.light-theme {
    --bg-color: #ffffff;
    --card-bg: #f8f9fa;
    --text-color: #212529;
    --primary-color-hover: #2b8a68;
    --primary-color-active: #1f6b52;
}

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

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* 禁用全局滚动 */
}

body {
    font-family: 'Segoe UI', 'Microsoft Yahei', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* 阅读进度条样式 */
.progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

body.light-theme .progress-bar-container {
    background-color: rgba(0, 0, 0, 0.1);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    transition: width 0.2s ease;
}

/* 亮色主题样式 */
body.light-theme {
    --bg-color: #ffffff;
    --card-bg: #f8f9fa;
    --text-color: #212529;
}

body.light-theme .header {
    background: linear-gradient(120deg, #f8f9fa, #e9ecef);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .search-container input {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #e9ecef;
}

body.light-theme .search-container input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 192, 141, 0.3);
    border: 1px solid var(--primary-color);
}

body.light-theme .nav-links a {
    color: #212529;
}
/* 新增样式：确保导航栏链接在浅色模式下使用深色图标 */
body.light-theme .nav-links a i {
    color: var(--primary-color, #00bcd4);
}

body.light-theme .nav-links a i {
    color: var(--primary-color, #00bcd4);
}

body.light-theme .submenu {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
/* 新增样式：确保子菜单链接在浅色模式下使用深色文字 */
body.light-theme .submenu li a,
body.light-theme .submenu li a:hover,
body.light-theme .submenu li a:active,
body.light-theme .submenu li a:focus {
    color: #212529;
}

body.light-theme .submenu li a {
    color: #212529;
}

body.light-theme .submenu li a,
body.light-theme .submenu li a:hover,
body.light-theme .submenu li a:active,
body.light-theme .submenu li a:focus {
    color: #212529;
}

body.light-theme .hamburger span {
    background-color: #212529;
}

body.light-theme .header-right > *:not(:last-child)::after {
    background-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .pfds-nav {
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
}
/* 新增样式：确保侧边栏导航链接在浅色模式下使用深色文字 */
body.light-theme .pfds-nav a {
    color: #212529;
}

body.light-theme .pfds-nav a {
    color: #212529;
}

body.light-theme .pfds-nav .nav-group-content li a {
    color: #212529;
}

body.light-theme .pfds-nav .nav-group-content li a:hover,
body.light-theme .pfds-nav .nav-group-content li a.active {
    background-color: rgba(79, 192, 141, 0.1);
    color: var(--primary-color);
}

body.light-theme .pfds-nav .nav-group-toggle {
    color: #212529;
}

body.light-theme .pfds-nav .nav-group-toggle:hover {
    background-color: rgba(79, 192, 141, 0.05);
}

body.light-theme .pfds-nav .nav-item > a {
    color: #212529;
}

body.light-theme .pfds-nav .nav-item > a:hover {
    background-color: rgba(79, 192, 141, 0.05);
}

body.light-theme .pfds-nav .nav-item > a.active {
    color: var(--primary-color);
}

body.light-theme .pfds-nav .toggle-icon {
    color: #212529;
}

body.light-theme .pfds-content-nav ul {
    border-left: 1px solid #e9ecef;
}

body.light-theme .pfds-content-nav a {
    color: #212529;
}
/* 新增样式：确保内容导航链接在浅色模式下悬停和激活时使用深色变体 */
body.light-theme .pfds-content-nav a:hover {
    color: var(--primary-color-hover, #2b8a68);
}
body.light-theme .pfds-content-nav a.active {
    color: var(--primary-color-active, #1f6b52);
}

body.light-theme .pfds-content-nav a:hover {
    color: var(--primary-color-hover, #2b8a68);
}

body.light-theme .pfds-content-nav a.active {
    color: var(--primary-color-active, #1f6b52);
}

body.light-theme .pfds-compile-time {
    background-color: #f8f9fa;
    color: #6c757d;
}

body.light-theme .pfds-content-area {
    background: #ffffff;
}

body.light-theme .search-card {
    background-color: var(--card-bg);
}

body.light-theme .search-card:hover {
    background-color: #ffffff;
}

body.light-theme .search-card h4 {
    color: #212529;
}
/* 新增样式：确保搜索卡片中的描述文字在浅色模式下使用深色文字 */
body.light-theme .search-card p {
    color: #43464c;
}

body.light-theme .search-card p {
    color: #555b61;
}

body.light-theme pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.light-theme code {
    color: #212529;
}

body.light-theme .copy-code-button {
    color: #6c757d;
}

body.light-theme .copy-code-button:hover {
    color: #212529;
}

body.light-theme .language-label {
    background: #e9ecef;
    color: #6c757d;
}

body.light-theme table {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body.light-theme th,
body.light-theme td {
    border-bottom: 1px solid #e9ecef;
    color: #212529;
}

body.light-theme th {
    background-color: #f8f9fa;
    color: #212529;
}

body.light-theme tr:hover {
    background-color: rgba(79, 192, 141, 0.05);
}

body.light-theme tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
    body.light-theme .header-right {
        background-color: #f8f9fa;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

body.light-theme .pfds-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

body.light-theme .pfds-modal {
    background-color: #ffffff;
    color: #212529;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body.light-theme .Attention-box.o {
    background-color: rgba(248, 249, 250, 0.9);
}

body.light-theme .Attention-box.red {
    background-color: #fff5f5;
}

body.light-theme .Attention-box.green {
    background-color: #f0fff0;
}

body.light-theme .Attention-box.blue {
    background-color: #f0f8ff;
}

body.light-theme .Attention-box.orange {
    background-color: #fffaf0;
}

body.light-theme .markdown-table {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #e9ecef;
}

body.light-theme .markdown-table th,
body.light-theme .markdown-table td {
    border: 1px solid #e9ecef;
}

body.light-theme .markdown-table th {
    background-color: #f8f9fa;
    color: #212529;
    border-bottom: 1px solid #dee2e6;
}

body.light-theme .markdown-table tr:hover {
    background-color: #f8f9fa;
}

body.light-theme .markdown-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

body.light-theme .markdown-inline-code {
    background-color: rgba(0, 0, 0, 0.07);
    color: #212529;
}

body.light-theme .side-nav-divider {
    background-image: linear-gradient(to right, transparent, #e9ecef, transparent);
}

body.light-theme .side-nav-divider-double {
    background-image:
            linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent),
            linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
}

/*---------------------------------      页面头部 - PC端     ---------------------------------*/

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: linear-gradient(120deg, #1f1f1f, #2c2c2c);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* 添加此部分以创建分隔线 */
.header-right > *:not(:last-child)::after {
    content: "";
    width: 1px; /* 调整宽度以改变竖线的粗细 */
    height: 1.3rem; /* 根据需要调整高度 */
    background-color: rgba(48, 48, 71, 0.87); /* 设置你想要的颜色 */
    margin-left: 1rem; /* 确保与gap一致或根据需要调整 */
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--primary-color), transparent);
}

.search-container {
    flex: 1;
    width: 300px;
    margin: 0 2rem;
    position: relative;
}

.search-container input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--border-radius);
    background-color: #2e2e2e;
    color: #fff;
    font-size: 0.9rem;
    transition: var(--transition-speed);
}

.search-container input:focus {
    outline: none;
    background-color: #383838;
    box-shadow: 0 0 0 3px rgba(79, 192, 141, 0.3);
}

.search-container button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 1rem;
    border: none;
    border-radius: 0 4px 4px 0;
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-speed);
    transform: translateX(0);
}

.search-container button:hover {
    background: #3e9b70;
    transform: translateX(-2px);
}

/*--------------------------------- 头部导航链接 + 图标 + 子菜单 ---------------------------------*/

/* 导航链接容器 */
.nav-links {
    display: flex;
    gap: 1.5rem;
    position: relative;
    font-family: sans-serif;
}

/* 顶部导航栏一级菜单 */
.nav-links > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}

/* 链接样式（包含图标） */
.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #aaa;
    text-decoration: none;
    font-weight: 500;
    position: relative;
}

/* 固定图标大小 */
.nav-links a i {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary-color, #00bcd4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*----------------------------- 二级菜单样式 -----------------------------*/
.submenu {
    position: absolute;
    top: 105%;          /* 稍微下移，避免贴得太近 */
    right: 0;           /* 初始位置为左侧对齐 */
    min-width: 90px;
    background: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 0.5rem 0;
    z-index: 1000;
    list-style: none;
    margin: 0;
    overflow: hidden;
    display: none;
}

/* 显示子菜单 */
.nav-item:hover .submenu {
    display: block;
}

/* 一级菜单项需要相对定位 */
.nav-item {
    position: relative;
}

/* 二级菜单项样式 */
.submenu li {
    padding: 0;
}

/* 二级菜单链接样式 */
.submenu li a {
    display: block;
    padding: 0.4rem 0.8rem; /* 更小内边距 */
    color: #ccc;
    font-size: 0.85rem; /* 更小字体 */
    text-decoration: none;
    border-radius: 6px;
    text-align: center; /* 文字居中 */
}

/* 二级菜单链接静态样式（无悬停变化） */
.submenu li a,
.submenu li a:hover,
.submenu li a:active,
.submenu li a:focus {
    background-color: transparent;
    color: #ccc;
    outline: none;
}
/*---------------------------------      页面头部 - 手机端     ---------------------------------*/

@media (max-width: 768px) {

    /* 隐藏不需要的元素 */
    .search-container,
    .nav-links {
        display: none; /* 完全隐藏搜索框和导航链接 */
    }

    /* 头部整体布局调整 */
    .header {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 1rem;
    }

    /* 左侧 logo 居左显示 */
    .header-left {
        justify-content: flex-start; /* 修改这里使内容居左 */
        margin-bottom: 0.3rem;
    }

    .logo {
        font-size: 1.3rem;
        text-align: center;
    }

    /* 汉堡菜单按钮 */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 1.5rem;
        top: 1rem;
        z-index: 10;
    }

    .hamburger span {
        width: 100%;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease-in-out;
    }

    /* 当菜单激活时，汉堡变叉效果 */
    .hamburger.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* 显示/隐藏 header-right 内容 */
    .header-right {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 0.5rem;
        padding: 0.8rem 1rem;
        background-color: #292929;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .header-right.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {

    /* 隐藏不需要的元素 */
    .search-container,
    .nav-links {
        display: none; /* 完全隐藏搜索框和导航链接 */
    }

    /* 头部整体布局调整 */
    .header {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 1rem;
    }

    /* 左侧 logo 居左显示 */
    .header-left {
        justify-content: flex-start; /* 修改这里使内容居左 */
        margin-bottom: 0.3rem;
    }

    .logo {
        font-size: 1.3rem;
        text-align: center;
    }

    /* 汉堡菜单按钮 */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 1.5rem;
        top: 1rem;
        z-index: 10;
    }

    .hamburger span {
        width: 100%;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease-in-out;
    }

    /* 当菜单激活时，汉堡变叉效果 */
    .hamburger.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* 显示/隐藏 header-right 内容 */
    .header-right {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 0.5rem;
        padding: 0.8rem 1rem;
        background-color: #292929;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .header-right.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
}

/* 确保汉堡菜单在大屏幕上完全不显示 */
@media (min-width: 769px) {
    .hamburger {
        display: none !important; /* 强制不在大屏幕上显示 */
    }
}
/*---------------------------------      主体布局-PC端     ---------------------------------*/

.pfds-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}
/* 左侧导航栏 */
.pfds-nav {
    width: 220px;
    background: #1e1e1e;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid #333;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pfds-nav::-webkit-scrollbar {
    display: none;
}

.pfds-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.pfds-nav li {
    margin: 0;
}

/* 所有链接通用样式（保留） */
.pfds-nav a {
    display: block;
    padding: 0.4rem 1.5rem;
    color: #ccc;
    text-decoration: none;
    font-weight: normal;
    transition: background 0.2s ease, border-left 0.2s ease;
    border-left: 3px solid transparent;
}

/* 分组子项样式（保持缩进） */
.pfds-nav .nav-group-content li a {
    padding-left: 2rem;
    font-weight: normal;
    color: #ccc;
    border-left: 3px solid transparent;
}

.pfds-nav .nav-group-content li a:hover,
.pfds-nav .nav-group-content li a.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
}

/* 分组标题样式（保持不变） */
.pfds-nav .nav-group-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.pfds-nav .nav-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.pfds-nav .nav-group-toggle.active {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

/* 新增：非分组项样式（与分组标题一致） */
.pfds-nav .nav-item > a {
    display: block;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: #aaa;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.pfds-nav .nav-item > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.pfds-nav .nav-item > a.active {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

/* 箭头图标样式 */
.pfds-nav .toggle-icon {
    font-size: 0.9rem;
    color: #888;
    transition: transform 0.3s ease;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    user-select: none;
    vertical-align: middle;
}

.pfds-nav .toggle-icon.active {
    transform: rotate(90deg);
    color: var(--primary-color);
}

/* 子菜单内容容器 */
.pfds-nav .nav-group-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    margin-left: 0;
    padding-left: 0;
}

.pfds-nav .nav-group-content.active {
    max-height: 9999px;
}
.pfds-compile-time {
    position: absolute;
    bottom: 1rem;        /* 距离底部 1rem */
    right: 1rem;         /* 改成右边距，显示在右下角 */
    color: #888;
    font-size: 0.8rem;
    background-color: #2a2a2a;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    white-space: nowrap; /* 防止文字换行 */
}

/* 主内容区域 */
.pfds-content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #1e1e1e;
}

.pfds-content-main {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pfds-content-main::-webkit-scrollbar {
    display: none;
}
/* 右侧内容导航栏 */
.pfds-content-nav {
    width: 250px;
    max-height: 95%;
    padding: 1rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 隐藏滚动条 */
.pfds-content-nav::-webkit-scrollbar {
    display: none;
}

/* 导航标题 */
.pfds-content-nav .nav-title {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}

/* 列表样式 */
.pfds-content-nav ul {
    min-height: 200px;
    list-style: none;
    padding: 0;
    border-left: 1px solid #333; /* 添加左侧分割线 */
}

/* 列表项 */
.pfds-content-nav li {
    margin: 0.5rem 0;
    position: relative;
}

/* 链接样式 */
.pfds-content-nav a {
    display: block;
    padding: 0.3rem 1rem;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    position: relative;
}

/* 悬停状态 - 放大、加粗以及颜色变化 */
.pfds-content-nav a:hover {
    transform: scale(1.05); /* 放大 */
    font-weight: bold; /* 加粗 */
    color: var(--primary-color-hover, #ffffff); /* 可自定义悬停颜色 */
}

/* 激活状态 - 放大、加粗以及颜色变化 */
.pfds-content-nav a.active {
    transform: scale(1.05); /* 放大 */
    font-weight: bold; /* 加粗 */
    color: var(--primary-color-active, #ffffff); /* 可自定义激活颜色 */
}

/* 移除了激活状态的指示器和下划线 */
.pfds-content-nav a.active::before,
.pfds-content-nav a:hover::after {
    display: none;
}
/*---------------------------------      主体布局-手机端     ---------------------------------*/

@media (max-width: 768px) {
    /* 隐藏侧边导航默认状态 */
    .pfds-nav {
        position: fixed;
        top: 0;
        left: -250px;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
    }

    /* 弹出时显示侧边栏 */
    .pfds-nav.show {
        left: 0;
    }

    /* 背景遮罩层 */
    .pfds-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    /* 主体容器添加左移效果 */
    .pfds-container.show-nav .pfds-content-area {
        transform: translateX(250px);
        transition: transform 0.3s ease-in-out;
    }

    /* 隐藏右侧内容导航栏 */
    .pfds-content-nav {
        display: none;
    }

    /* 修改主内容区域为全宽 */
    .pfds-content-area {
        flex-direction: column;
        width: 100vw; /* 占满整个视口宽度 */
        transform: translateX(0); /* 默认不偏移 */
        transition: transform 0.3s ease-in-out;
    }

    .pfds-content-main {
        width: 100%;
        padding: 1rem;
    }

    /* 当 nav 展开时，主内容向右平移 */
    .pfds-container.show-nav .pfds-content-area {
        transform: translateX(100px);
    }
}
/*---------------------------------      页面内容动画     ---------------------------------*/

.page-content {
    display: none;
    opacity: 0;
    transform: translateX(20px);
    animation: fadeIn 0.5s ease forwards;
}

.page-content.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/*---------------------------------      代码块样式-PC端     ---------------------------------*/
pre {
    background-color: #151515; /* GitHub Dark 主题背景颜色 */
    border: 1px solid rgba(53, 53, 53, 0.83); /* 添加线框 */
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: 2rem auto; /* 使用 'auto' 让元素水平居中 */
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
}

body.light-theme pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 其他样式保持不变 */
code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.95rem;
    color: inherit;
    background: transparent;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

body.light-theme code {
    color: #212529;
}

.copy-code-button {
    /* 现有的样式 */
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #aaa;
    z-index: 99;
    transition: color 0.2s ease;
    display: flex; /* 使用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 24px; /* 根据实际需求设置宽度 */
    height: 24px; /* 根据实际需求设置高度 */
}

body.light-theme .copy-code-button {
    color: #6c757d;
}

.copy-code-button:hover {
    color: #fff;
}

body.light-theme .copy-code-button:hover {
    color: #212529;
}

.language-label {
    position: absolute;
    top: 0.5rem;
    right: 3rem;
    font-size: 0.75rem;
    background: #333;
    color: #aaa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 99;
    pointer-events: none;
}

body.light-theme .language-label {
    background: #e9ecef;
    color: #6c757d;
}

/* 隐藏滚动条 - WebKit 浏览器 */
pre::-webkit-scrollbar {
    display: none;
}

/* Firefox 和 IE/Edge 滚动条隐藏 */
pre {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    background: #151515;
}

body.light-theme .hljs {
    color: #212529;
    background: #f8f9fa;
}

code.hljs{
    padding:3px 5px;
}

/* GitHub Dark Theme Styles */
.hljs {
    color: #c9d1d9;
    background: #151515;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
    color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
    color: #d2a8ff;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
    color: #79c0ff;
}
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: #a5d6ff;
}
.hljs-built_in,
.hljs-symbol {
    color: #ffa657;
}
.hljs-code,
.hljs-comment,
.hljs-formula {
    color: #8b949e;
}
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
    color: #7ee787;
}
.hljs-subst {
    color: #c9d1d9;
}
.hljs-section {
    color: #1f6feb;
    font-weight: 700;
}
.hljs-bullet {
    color: #f2cc60;
}
.hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
}
.hljs-strong {
    color: #c9d1d9;
    font-weight: 700;
}
.hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}
.hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}

/* 浅色主题下的代码高亮样式 */
body.light-theme .hljs {
    color: #212529;
    background: #f8f9fa;
}

body.light-theme .hljs-doctag,
body.light-theme .hljs-keyword,
body.light-theme .hljs-meta .hljs-keyword,
body.light-theme .hljs-template-tag,
body.light-theme .hljs-template-variable,
body.light-theme .hljs-type,
body.light-theme .hljs-variable.language_ {
    color: #d73a49;
}

body.light-theme .hljs-title,
body.light-theme .hljs-title.class_,
body.light-theme .hljs-title.class_.inherited__,
body.light-theme .hljs-title.function_ {
    color: #6f42c1;
}

body.light-theme .hljs-attr,
body.light-theme .hljs-attribute,
body.light-theme .hljs-literal,
body.light-theme .hljs-meta,
body.light-theme .hljs-number,
body.light-theme .hljs-operator,
body.light-theme .hljs-selector-attr,
body.light-theme .hljs-selector-class,
body.light-theme .hljs-selector-id,
body.light-theme .hljs-variable {
    color: #005cc5;
}

body.light-theme .hljs-meta .hljs-string,
body.light-theme .hljs-regexp,
body.light-theme .hljs-string {
    color: #032f62;
}

body.light-theme .hljs-built_in,
body.light-theme .hljs-symbol {
    color: #e36209;
}

body.light-theme .hljs-code,
body.light-theme .hljs-comment,
body.light-theme .hljs-formula {
    color: #6a737d;
}

body.light-theme .hljs-name,
body.light-theme .hljs-quote,
body.light-theme .hljs-selector-pseudo,
body.light-theme .hljs-selector-tag {
    color: #22863a;
}

body.light-theme .hljs-subst {
    color: #212529;
}

body.light-theme .hljs-section {
    color: #005cc5;
    font-weight: 700;
}

body.light-theme .hljs-bullet {
    color: #735c0f;
}

body.light-theme .hljs-emphasis {
    color: #212529;
    font-style: italic;
}

body.light-theme .hljs-strong {
    color: #212529;
    font-weight: 700;
}

body.light-theme .hljs-addition {
    color: #22863a;
    background-color: #f0fff4;
}

body.light-theme .hljs-deletion {
    color: #b31d28;
    background-color: #ffeef0;
}

/*---------------------------------      代码块样式-手机端     ---------------------------------*/

@media (max-width: 768px) {
    pre {
        padding: 1rem;
        margin: 1.5rem 0;
        border-radius: 0;
    }

    code {
        font-size: 0.9rem;
        padding: 0.15em 0.3em;
    }

    .language-label {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        top: 0.3rem;
        right: 0.5rem;
    }
}

/*---------------------------------      表格样式-PC端     ---------------------------------*/

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #2a2a2a;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 2rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

th,
td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #333;
    color: #ddd;
}

th {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/*---------------------------------      表格样式-手机端     ---------------------------------*/

@media (max-width: 768px) {
    table {
        display: block; /* 改变显示方式，使其适应移动设备 */
        overflow-x: auto; /* 添加横向滚动条，以处理内容过长的情况 */
        -webkit-overflow-scrolling: touch; /* 提升iOS上的滚动体验 */
    }

    th,
    td {
        padding: 0.5rem 0.75rem; /* 减少内边距，使表格更紧凑 */
        font-size: 0.9rem; /* 稍微减小字体大小，确保内容在小屏幕上易于阅读 */
    }

    th {
        background-color: #444; /* 加深表头颜色，增强对比度 */
        font-size: 0.95rem; /* 稍微减小字体大小，但保持表头清晰 */
    }

    tr:hover {
        background-color: rgba(255, 255, 255, 0.08); /* 增强悬停效果的对比度 */
    }

    tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.05); /* 微调偶数行背景色 */
    }
}
/*---------------------------------      模拟框     ---------------------------------*/

.pfds-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    backdrop-filter: blur(4px); /* 背景模糊 */
    transition: var(--transition-speed);
}

.pfds-modal {
    background-color: #1a1a1a; /* 更深的背景色 */
    padding: 2rem;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 650px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* 添加阴影 */
    animation: fadeInZoom 0.4s ease-out;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    z-index: 1000;
    position: relative;
}

/* 隐藏滚动条 - WebKit 浏览器 */
.pfds-modal::-webkit-scrollbar {
    display: none;
}

/* Firefox 和 IE/Edge 滚动条隐藏 */
.pfds-modal {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/*---------------------------------      搜索卡片     ---------------------------------*/

.search-card {
    background-color: var(--card-bg);
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-card:last-child {
    border-bottom: none;
}

.search-card:hover {
    background-color: #333;
    border-left-color: var(--primary-color);
    transform: none;
}

.search-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(79,192,141,0.1) 0%, transparent 3%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.search-card:hover::before {
    opacity: 1;
}

.search-card:hover::after {
    content: '▶';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 0.7rem;
    z-index: 1;
}

.search-result-title {
    margin: 0;
    font-size: 0.95rem;
    color: #ddd;
    position: relative;
    z-index: 1;
    font-weight: 500;
    padding-left: 1rem;
}
body.light-theme .search-result-title {
    margin: 0;
    font-size: 0.95rem;
    color: #000000;
    position: relative;
    z-index: 1;
    font-weight: 500;
    padding-left: 1rem;
}
.search-result-title::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    line-height: 1.2rem;
}

.search-result-summary {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    padding-left: 1rem;
}
body.light-theme .search-result-summary {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    padding-left: 1rem;
}


.search-page-group {
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.search-page-group:last-child {
    margin-bottom: 0;
}

.search-page-title {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #fff;
    background-color: #333;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
}
.light-theme .search-page-title {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #fff;
    background-color: #0d2c04;
    font-weight: 600;
}
/*---------------------------------      动画定义     ---------------------------------*/

@keyframes fadeInZoom {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*----------------------------------------- 文档内容区域--------------------------------- */
.pfds-content-main {
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* -----------------------------------------标题样式------------------------------------- */
.pfds-content-main h1 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

/*---------------------------------------- 分隔线样式----------------------------------- */
/* 原有的单横线分割器 */
.side-nav-divider {
    margin: 40px 0;
    border: none;
    height: 1px;
    /* 使用从透明到浅色再到透明的渐变 */
    background-image: linear-gradient(to right, transparent, rgb(0, 0, 0), transparent);
}

/* 新增的双横线分割器 */
.side-nav-divider-double {
    margin: 40px 0;
    border: none;
    height: 8px; /* 总高度为8px，包括两条线和它们之间的间距 */
    background-image:
            linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent),
            linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    background-size: 100% 1px; /* 每条线的高度为1px */
    background-position: 0 1px, 0 7px; /* 第一条线从顶部开始2px，第二条线从顶部开始6px，保证两者之间有4px的间距 */
    background-repeat: no-repeat;
}
/* --------------------------------------- 绿色井号样式-------------------------------- */
.green-pound {
    color: #2E8B57;
}
/*----------------------------------------注意框样式----------------------------------------*/
/* 定义基本的Attention-box样式 */
.Attention-box {
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    position: relative;
}

/* 对齐方式样式 */
.align-center {
    margin-left: auto;
    margin-right: auto;
}

.align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 添加垂直条带装饰 */
.strip {
    width: 5px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
/* 特定于Attention-box的颜色风格 */
.Attention-box.o {
    background-color: rgba(44, 44, 44, 0.9);
}
.Attention-box.o .strip {
    background-color:#3d6f99;
}

/* 特定于Attention-box的颜色风格 */
.Attention-box.red {
    background-color: #3a1d1d;
}
.Attention-box.red .strip {
    background-color: #8b3500;
}

.Attention-box.green {
    background-color: #1d3a1d;
}
.Attention-box.green .strip {
    background-color: #6f993d;
}

.Attention-box.blue {
    background-color: #1d263a; /* 深蓝色背景 */
}
.Attention-box.blue .strip {
    background-color: #3d6f99; /* 蓝卡的条纹颜色 */
}

.Attention-box.orange {
    background-color: #3a2b1d; /* 深橙色背景 */
}
.Attention-box.orange .strip {
    background-color: #b06600; /* 橙卡的条纹颜色 */
}

/*----------------------------------------代码块样式样式-PC端----------------------------------------*/
.markdown-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #1e1e1e; /* 深色背景 */
    color: #e6e6e6; /* 浅色文字 */
    font-size: 14px;
    border: 1px solid #333;
    display: table; /* 确保表格行为保持一致 */
}

.markdown-table th,
.markdown-table td {
    padding: 12px 16px;
    border: 1px solid #333;
    text-align: left;
    display: table-cell; /* 确保单元格行为保持一致 */
    flex-grow: 1; /* 单元格会根据内容自动扩展 */
}

.markdown-table th {
    background-color: #2d2d2d; /* 略亮一点的表头背景 */
    color: #ffffff;
    font-weight: bold;
    border-bottom: 1px solid #444;
}

.markdown-table tr {
    transition: background-color 0.2s ease;
    display: table-row; /* 确保行行为保持一致 */
}

.markdown-table tr:hover {
    background-color: #2a2a2a; /* 鼠标悬停时稍微变亮 */
}

.markdown-table tr:nth-child(even) {
    background-color: #242424;
}

/*----------------------------------------内联代码样式---------------------------------------*/
.markdown-inline-code {
    font-family: monospace;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(66, 66, 66, 0.47);
    color: #bab9b9;
}

.markdown-inline-code.red {
    background-color: #ffdddd;
    color: #c00;
}

.markdown-inline-code.green {
    background-color: #ddffdd;
    color: #060;
}

.markdown-inline-code.highlight {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

/*----------------------------------------代码无序列表样式---------------------------------------*/
.markdown-ul {
    list-style-type: disc;
    padding-left: 20px;
}

.markdown-li {
    margin-bottom: 4px;
}
/*----------------------------------------代码有序列表样式---------------------------------------*/
.markdown-ol {
    padding-left: 20px;
}

.markdown-ol li {
    margin-bottom: 4px;
}
/*----------------------------------------代码富文本样式---------------------------------------*/
.markdown-word {
    white-space: pre-wrap;       /* 保留空白字符，自动换行 */
    word-wrap: break-word;       /* 长单词或 URL 自动换行 */
    font-family: inherit;        /* 继承父级字体 */
    overflow-x: auto;            /* 如果有长行可横向滚动 */
}
/*----------------------------------------主题切换题样式---------------------------------------*/
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #000000;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/*----------------------------------------加粗文本样式---------------------------------------*/
strong {
    font-weight: bold;
    color: #ffffff;
}

body.light-theme strong {
    color: #000000;
}
.icon-github {
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzUzMTE0NzI1MTg4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDkgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMyMTEiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTI0Ljk3OTMzMiAwQzIzNC42NzYxOTEgMCAwIDIzNC42NzYxOTEgMCA1MjQuOTc5MzMyYzAgMjMyLjA2ODY3OCAxNTAuMzY2NTk3IDQyOC41MDEzNDIgMzU4Ljk2NzY1NiA0OTguMDM1MDI4IDI2LjA3NTEzMiA1LjIxNTAyNiAzNS42MzYwMTQtMTEuMjk5MjI0IDM1LjYzNjAxNC0yNS4yMDU5NjEgMC0xMi4xNjgzOTUtMC44NjkxNzEtNTMuODg4NjA3LTAuODY5MTcxLTk3LjM0NzE2MS0xNDYuMDIwNzQxIDMxLjI5MDE1OS0xNzYuNDQxNzI5LTYyLjU4MDMxOC0xNzYuNDQxNzI5LTYyLjU4MDMxOC0yMy40Njc2MTktNjAuODQxOTc2LTU4LjIzNDQ2Mi03Ni40ODcwNTUtNTguMjM0NDYzLTc2LjQ4NzA1NS00Ny44MDQ0MDktMzIuMTU5MzMgMy40NzY2ODQtMzIuMTU5MzMgMy40NzY2ODUtMzIuMTU5MzMgNTMuMDE5NDM2IDMuNDc2Njg0IDgwLjgzMjkxIDUzLjg4ODYwNyA4MC44MzI5MSA1My44ODg2MDcgNDYuOTM1MjM4IDc5Ljk2MzczOSAxMjIuNTUzMTIyIDU3LjM2NTI5MSAxNTIuOTc0MTEgNDMuNDU4NTU0IDQuMzQ1ODU1LTMzLjg5NzY3MiAxOC4yNTI1OTMtNTcuMzY1MjkxIDMzLjAyODUwMS03MC40MDI4NTctMTE2LjQ2ODkyNS0xMi4xNjgzOTUtMjM5LjAyMjA0Ny01Ny4zNjUyOTEtMjM5LjAyMjA0Ny0yNTkuMDEyOTgyIDAtNTcuMzY1MjkxIDIwLjg2MDEwNi0xMDQuMzAwNTI5IDUzLjg4ODYwNy0xNDAuODA1NzE1LTUuMjE1MDI2LTEzLjAzNzU2Ni0yMy40Njc2MTktNjYuOTI2MTczIDUuMjE1MDI3LTEzOS4wNjczNzIgMCAwIDQ0LjMyNzcyNS0xMy45MDY3MzcgMTQ0LjI4MjM5OSA1My44ODg2MDcgNDEuNzIwMjEyLTExLjI5OTIyNCA4Ni45MTcxMDgtMTcuMzgzNDIyIDEzMS4yNDQ4MzMtMTcuMzgzNDIyczg5LjUyNDYyMSA2LjA4NDE5OCAxMzEuMjQ0ODMzIDE3LjM4MzQyMkM3NTYuMTc4ODM5IDIwMy4zODYwMzIgODAwLjUwNjU2NCAyMTcuMjkyNzcgODAwLjUwNjU2NCAyMTcuMjkyNzdjMjguNjgyNjQ2IDcyLjE0MTIgMTAuNDMwMDUzIDEyNi4wMjk4MDYgNS4yMTUwMjYgMTM5LjA2NzM3MiAzMy44OTc2NzIgMzYuNTA1MTg1IDUzLjg4ODYwNyA4My40NDA0MjQgNTMuODg4NjA3IDE0MC44MDU3MTUgMCAyMDEuNjQ3NjktMTIyLjU1MzEyMiAyNDUuOTc1NDE1LTIzOS44OTEyMTggMjU5LjAxMjk4MiAxOS4xMjE3NjQgMTYuNTE0MjUxIDM1LjYzNjAxNCA0Ny44MDQ0MDkgMzUuNjM2MDE1IDk3LjM0NzE2MSAwIDcwLjQwMjg1Ny0wLjg2OTE3MSAxMjYuODk4OTc4LTAuODY5MTcyIDE0NC4yODIzOTkgMCAxMy45MDY3MzcgOS41NjA4ODIgMzAuNDIwOTg4IDM1LjYzNjAxNSAyNS4yMDU5NjEgMjA4LjYwMTA1OS02OS41MzM2ODYgMzU4Ljk2NzY1Ni0yNjUuOTY2MzUgMzU4Ljk2NzY1NS00OTguMDM1MDI4QzEwNDkuOTU4NjYzIDIzNC42NzYxOTEgODE0LjQxMzMwMSAwIDUyNC45NzkzMzIgMHoiIGZpbGw9IiM4YThhOGEiIHAtaWQ9IjMyMTIiPjwvcGF0aD48cGF0aCBkPSJNMTk5LjA0MDE3NyA3NTMuNTcxMzI2Yy0wLjg2OTE3MSAyLjYwNzUxMy01LjIxNTAyNiAzLjQ3NjY4NC04LjY5MTcxMSAxLjczODM0MnMtNi4wODQxOTgtNS4yMTUwMjYtNC4zNDU4NTUtNy44MjI1NGMwLjg2OTE3MS0yLjYwNzUxMyA1LjIxNTAyNi0zLjQ3NjY4NCA4LjY5MTcxMS0xLjczODM0MnM1LjIxNTAyNiA1LjIxNTAyNiA0LjM0NTg1NSA3LjgyMjU0eiBtLTYuOTUzMzY5LTQuMzQ1ODU2TTIxOS45MDAyODMgNzc3LjAzODk0NWMtMi42MDc1MTMgMi42MDc1MTMtNy44MjI1NCAwLjg2OTE3MS0xMC40MzAwNTMtMi42MDc1MTQtMy40NzY2ODQtMy40NzY2ODQtNC4zNDU4NTUtOC42OTE3MTEtMS43MzgzNDItMTEuMjk5MjI0IDIuNjA3NTEzLTIuNjA3NTEzIDYuOTUzMzY5LTAuODY5MTcxIDEwLjQzMDA1MyAyLjYwNzUxNCAzLjQ3NjY4NCA0LjM0NTg1NSA0LjM0NTg1NSA5LjU2MDg4MiAxLjczODM0MiAxMS4yOTkyMjR6IG0tNS4yMTUwMjYtNS4yMTUwMjdNMjQwLjc2MDM4OSA4MDcuNDU5OTMyYy0zLjQ3NjY4NCAyLjYwNzUxMy04LjY5MTcxMSAwLTExLjI5OTIyNC00LjM0NTg1NS0zLjQ3NjY4NC00LjM0NTg1NS0zLjQ3NjY4NC0xMC40MzAwNTMgMC0xMi4xNjgzOTUgMy40NzY2ODQtMi42MDc1MTMgOC42OTE3MTEgMCAxMS4yOTkyMjQgNC4zNDU4NTUgMy40NzY2ODQgNC4zNDU4NTUgMy40NzY2ODQgOS41NjA4ODIgMCAxMi4xNjgzOTV6IG0wIDBNMjY5LjQ0MzAzNCA4MzcuMDExNzQ5Yy0yLjYwNzUxMyAzLjQ3NjY4NC04LjY5MTcxMSAyLjYwNzUxMy0xMy45MDY3MzctMS43MzgzNDItNC4zNDU4NTUtNC4zNDU4NTUtNi4wODQxOTgtMTAuNDMwMDUzLTIuNjA3NTEzLTEzLjAzNzU2NiAyLjYwNzUxMy0zLjQ3NjY4NCA4LjY5MTcxMS0yLjYwNzUxMyAxMy45MDY3MzcgMS43MzgzNDIgNC4zNDU4NTUgMy40NzY2ODQgNS4yMTUwMjYgOS41NjA4ODIgMi42MDc1MTMgMTMuMDM3NTY2eiBtMCAwTTMwOC41NTU3MzMgODUzLjUyNmMtMC44NjkxNzEgNC4zNDU4NTUtNi45NTMzNjkgNi4wODQxOTgtMTMuMDM3NTY2IDQuMzQ1ODU1LTYuMDg0MTk4LTEuNzM4MzQyLTkuNTYwODgyLTYuOTUzMzY5LTguNjkxNzExLTEwLjQzMDA1MyAwLjg2OTE3MS00LjM0NTg1NSA2Ljk1MzM2OS02LjA4NDE5OCAxMy4wMzc1NjYtNC4zNDU4NTUgNi4wODQxOTggMS43MzgzNDIgOS41NjA4ODIgNi4wODQxOTggOC42OTE3MTEgMTAuNDMwMDUzeiBtMCAwTTM1MS4xNDUxMTYgODU3LjAwMjY4NGMwIDQuMzQ1ODU1LTUuMjE1MDI2IDcuODIyNTQtMTEuMjk5MjI0IDcuODIyNTQtNi4wODQxOTggMC0xMS4yOTkyMjQtMy40NzY2ODQtMTEuMjk5MjI0LTcuODIyNTRzNS4yMTUwMjYtNy44MjI1NCAxMS4yOTkyMjQtNy44MjI1NGM2LjA4NDE5OCAwIDExLjI5OTIyNCAzLjQ3NjY4NCAxMS4yOTkyMjQgNy44MjI1NHogbTAgME0zOTEuMTI2OTg2IDg1MC4wNDkzMTVjMC44NjkxNzEgNC4zNDU4NTUtMy40NzY2ODQgOC42OTE3MTEtOS41NjA4ODIgOS41NjA4ODItNi4wODQxOTggMC44NjkxNzEtMTEuMjk5MjI0LTEuNzM4MzQyLTEyLjE2ODM5NS02LjA4NDE5Ny0wLjg2OTE3MS00LjM0NTg1NSAzLjQ3NjY4NC04LjY5MTcxMSA5LjU2MDg4MS05LjU2MDg4MiA2LjA4NDE5OC0wLjg2OTE3MSAxMS4yOTkyMjQgMS43MzgzNDIgMTIuMTY4Mzk2IDYuMDg0MTk3eiBtMCAwIiBmaWxsPSIjOGE4YThhIiBwLWlkPSIzMjEzIj48L3BhdGg+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
}

.icon-copy {
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzUzMTMyODMzNDc2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc3NTMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODg5LjE3MzMzMyAzNC4xMzMzMzNoLTU4MC4yNjY2NjZjLTU0LjYxMzMzMyAwLTEwMC42OTMzMzMgNDQuMzczMzMzLTEwMC42OTMzMzQgMTAwLjY5MzMzNHYxMDkuMjI2NjY2YzAgMTguNzczMzMzIDE1LjM2IDM0LjEzMzMzMyAzNC4xMzMzMzQgMzQuMTMzMzM0czM0LjEzMzMzMy0xNS4zNiAzNC4xMzMzMzMtMzQuMTMzMzM0VjEzNC44MjY2NjdjMC0xOC43NzMzMzMgMTUuMzYtMzQuMTMzMzMzIDM0LjEzMzMzMy0zNC4xMzMzMzRoNTgwLjI2NjY2N2MxOC43NzMzMzMgMCAzNC4xMzMzMzMgMTUuMzYgMzQuMTMzMzMzIDM0LjEzMzMzNHY1ODAuMjY2NjY2YzAgMTguNzczMzMzLTE1LjM2IDM0LjEzMzMzMy0zNC4xMzMzMzMgMzQuMTMzMzM0aC0xMTAuOTMzMzMzYy0xOC43NzMzMzMgMC0zNC4xMzMzMzMgMTUuMzYtMzQuMTMzMzM0IDM0LjEzMzMzM3MxNS4zNiAzNC4xMzMzMzMgMzQuMTMzMzM0IDM0LjEzMzMzM2gxMTAuOTMzMzMzYzU0LjYxMzMzMyAwIDEwMC42OTMzMzMtNDQuMzczMzMzIDEwMC42OTMzMzMtMTAwLjY5MzMzM1YxMzYuNTMzMzMzYy0xLjcwNjY2Ny01OC4wMjY2NjctNDYuMDgtMTAyLjQtMTAyLjQtMTAyLjR6IiBmaWxsPSIjNTE1MTUxIiBwLWlkPSI3NzU0Ij48L3BhdGg+PHBhdGggZD0iTTcxNS4wOTMzMzMgMjQyLjM0NjY2N2gtNjE0LjRDNjMuMTQ2NjY3IDI0Mi4zNDY2NjcgMzQuMTMzMzMzIDI3My4wNjY2NjcgMzQuMTMzMzMzIDMwOC45MDY2Njd2NjE0LjRDMzQuMTMzMzMzIDk1OS4xNDY2NjcgNjQuODUzMzMzIDk4OS44NjY2NjcgMTAwLjY5MzMzMyA5ODkuODY2NjY3aDYxNC40YzM3LjU0NjY2NyAwIDY2LjU2LTMwLjcyIDY2LjU2LTY2LjU2di02MTQuNGMwLTM3LjU0NjY2Ny0yOS4wMTMzMzMtNjYuNTYtNjYuNTYtNjYuNTZ6IiBmaWxsPSIjNTE1MTUxIiBwLWlkPSI3NzU1Ij48L3BhdGg+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
}