/*
 * 文件描述：用于网站的基本样式文件
 * 作者：有勇气的牛排
 * 作者主页：https://www.couragesteak.com/
 * 创建日期：2024-12-31
 * 版本：1.0.0
 * 开源协议：MIT
 */

:root {
    /* 基础颜色 */
    --Base-Deep01: #0D1117; /* 深黑，主背景色 */
    --Base-Deep02: #161B22; /* 深灰黑，次背景 */
    --Base-Mid01: #21262D; /* 深灰蓝，中性色背景 */
    --Base-Mid02: #2D333B; /* 深灰，中性色强调 */
    --Base-Light01: #8B949E; /* 浅灰蓝，辅助文本 */
    --Base-Light02: #C9D1D9; /* 灰白色，正文文本 */
    --Base-Light03: #F0F6FC; /* 纯白色，反差背景 */
}

/* ============ 字体色 ============ */
.color-white {
    color: white;
}

/* ============ 背景色 ============ */
/* 渐变风格 */
.bg-gradient1 {
    background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
}

.bg-gradient2 {
    background: linear-gradient(to right, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89));
}

.bg-gradient3 {
    background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));
}

.bg-gradient4 {
    background: linear-gradient(to right, rgb(52, 232, 158), rgb(15, 52, 67));
}

.bg-gradient5 {
    background: linear-gradient(to right, rgb(255, 0, 204), rgb(51, 51, 153));
}

.bg-gradient6 {
    background: linear-gradient(to right, rgb(179, 255, 171), rgb(18, 255, 247));
}

/* ============ 边框 ============ */
/* 实线 边框 1px */
.solid-red-1px {
    border: 1px solid #FF0033;
}

.solid-blue-1px {
    border: 1px solid #007BFF;
}

.solid-grey-1px {
    border: 1px solid #cccccc;
}

/* 虚线 */
.dashed-red-1px {
    border: 1px dashed #FF0033;
}

.dashed-blue-1px {
    border: 1px dashed #007BFF;
}

.dashed-grey-1px {
    border: 1px dashed #cccccc;
}

/* 圆点 */
.dotted-red-1px {
    border: 1px dotted #FF0033;
}

.dotted-blue-1px {
    border: 1px dotted #007BFF;
}

.dotted-grey-1px {
    border: 1px dotted #cccccc;
}

/* 双实线 */
.double-red-1px {
    border: 3px double #FF0033;
}

.double-blue-1px {
    border: 3px double #007BFF;
}

.double-grey-1px {
    border: 3px double #cccccc;
}

/* 凹槽边框 */
.groove-blue-1px {
    border: 5px groove #007BFF;
}

/* 内嵌边框 */
.inset-blue-1px {
    border: 5px inset #007BFF;
}

/* 实线 带阴影 */
.border-shadow-orange:focus {
    border-color: #fda085;
    box-shadow: 0 0 5px rgba(253, 160, 133, 0.5);
}

.border-shadow-blue:focus {
    border-color: #409EFF;
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

/* ============ 按钮 ============ */
.btn-base {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-basic {
    /*padding: 10px 20px;*/
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 透明背景按钮 */
.btn-transparent {
    background-color: transparent;
    color: #3498db;
    border: 1px solid #3498db;
    /*padding: 12px 24px;*/
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.btn-transparent:hover {
    background-color: #3498db;
    color: white;
}


/* ============ 输入框 ============ */
.input-default {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    font-size: 16px;
    box-sizing: border-box;
}

.input-default:focus {
    outline: none;
}

.input-rounded {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 50px;
    width: 100%;
    max-width: 300px;
    outline: none;
    transition: border-color 0.3s ease; /* 动画效果 */
}

.input-rounded:focus {
    outline: none;
}


/* ============ 区域等待 ============ */
/* 遮罩层 */
.cs-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 列方向排列 */
    visibility: hidden;
}

.cs-loading-mask.active {
    visibility: visible;
}

/* 旋转的圆圈 */
.cs-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #409eff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: cs-spin 0.9s linear infinite;
}

/* 旋转动画 */
@keyframes cs-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 加载中文本 */
.cs-loading-mask p {
    color: #ffffff;
    font-size: 16px;
    margin-top: 10px; /* 控制文字和圈圈的间距 */
}

/* 按钮样式 */
#csLoadButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
}

#csLoadButton:hover {
    background-color: #66b1ff;
}


/* ============ 标签 ============ */
/* 通用标签样式 */
.tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    border-radius: 4px;
    background-color: #f0f2f5;
    line-height: 20px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.tag-shadow {
    display: inline-block;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    border-radius: 4px;
    background-color: #f0f2f5;
    line-height: 20px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 不同状态标签 */
.tag-success {
    color: #67c23a;
    background-color: #f0f9eb;
}

.tag-warning {
    color: #e6a23c;
    background-color: #fdf6ec;
}

.tag-danger {
    color: #f56c6c;
    background-color: #fef0f0;
}

.tag-info {
    color: #909399;
    background-color: #f4f4f5;
}

/* 可移除标签 */
.tag-removable {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.tag-removable .remove {
    margin-left: 6px;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
}

.tag-removable .remove:hover {
    color: #c0c4cc;
}

/* 圆角标签 */
.tag-rounded {
    border-radius: 999px;
}

/* 边框样式标签 */
.tag-border {
    background-color: transparent;
    border: 1px solid #dcdfe6;
}

.tag-border.tag-success {
    color: #67c23a;
    border-color: #c2e7b0;
}

.tag-border.tag-warning {
    color: #e6a23c;
    border-color: #f5dab1;
}

.tag-border.tag-danger {
    color: #f56c6c;
    border-color: #fbc4c4;
}

.tag-border.tag-info {
    color: #909399;
    border-color: #d3d4d6;
}

/* 动态效果标签 */
.tag-shadow:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ============ 通知 ============ */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

/* 通用样式 */
.notification {
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn 0.5s ease, slideOut 0.5s ease 4s forwards;
    color: #fff;
}

.notification h4 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.notification p {
    margin: 5px 0 0;
    font-size: 14px;
}

.notification .close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* 样式 1: 渐变风格 */
.notification.gradient1 {
    background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
}

.notification.gradient2 {
    background: linear-gradient(to right, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89));
}

.notification.gradient3 {
    background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));
}

.notification.gradient4 {
    background: linear-gradient(to right, rgb(52, 232, 158), rgb(15, 52, 67));
}

.notification.gradient5 {
    background: linear-gradient(to right, rgb(255, 0, 204), rgb(51, 51, 153));
}

.notification.gradient6 {
    background: linear-gradient(to right, rgb(179, 255, 171), rgb(18, 255, 247));
}

/* 样式 2: 简约深色 */
.notification.dark {
    background: #333;
}

/* 样式 3: 成功通知 */
.notification.success {
    background: #28a745;
}

/* 样式 4: 警告通知 */
.notification.warning {
    background: #ffc107;
    color: #333;
}

/* 样式 5: 错误通知 */
.notification.error {
    background: #dc3545;
}

/*============ 点击下拉菜单 ============*/
.menu-item {
    position: relative;

    /*border: 1px solid red;*/
    /*width: 100px;*/
    /*height: 60px;*/
}

.dropdown-menu {
    position: absolute;
    top: 135%;
    right: 0;
    background-color: white;
    /*border: 1px solid #ddd;*/
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    /*display: block;*/
    z-index: 100;
    min-width: 150px;
    padding: 10px;
}


/* ====== 文章代码模块 ========= */
/* 顶部模拟窗口装饰 */
.cs-article .code-block-header {
    display: flex;
    align-items: center;
    padding: 6px;
    background-color: #1e1e1e; /* 深色顶部背景 */
}

.cs-article .code-block-header .button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.cs-article .code-block-header .button.red {
    background-color: #ff5f56;
}

.cs-article .code-block-header .button.yellow {
    background-color: #ffbd2e;
}

.cs-article .code-block-header .button.green {
    background-color: #27c93f;
}

/* 代码块样式 */
.cs-article pre {
    position: relative;
    background-color: #2d2d2d;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0; /* 清除内边距 */
}

.cs-article pre code {
    display: block;
    padding: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 500;
    color: #dcdcdc;
    line-height: 1.4;
    /*overflow-x: auto;*/
    white-space: pre-wrap;
    /*white-space: pre;*/
}

/* 滚动条样式 */
.cs-article pre code::-webkit-scrollbar {
    height: 5px;
}

.cs-article pre code::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.cs-article pre code::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============ 自定义滚动条1 ============  */
/* 针对 Chrome、Edge 和 Safari 浏览器的滚动条样式 */
.scroll1::-webkit-scrollbar {
    width: 3px;
}

.scroll1::-webkit-scrollbar {
    width: 3px !important; /* 滚动条宽度 */
    height: 3px !important; /* 滚动条宽度 */
}


.scroll1::-webkit-scrollbar-thumb {
    /*background-color: red;*/
    background-color: #9f9898;
}

/*  自定义滚动条2 */
/* 针对 Chrome、Edge 和 Safari 浏览器的滚动条样式 */
.scroll2::-webkit-scrollbar {
    width: 3px;
}

.scroll2::-webkit-scrollbar {
    width: 3px !important; /* 滚动条宽度 */
    height: 3px !important; /* 滚动条宽度 */
}


.scroll2::-webkit-scrollbar-thumb {
    /*background-color: red;*/
    background-color: #e8e8e8;
}

/* ============ 自定义 a标签 ============  */

.clear_a_style a {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 使用父元素的文字颜色 */
}

.a_style3 a {
    text-decoration: none; /* 去掉默认下划线 */
    color: #0078d7; /* 蓝色字体，常见链接颜色 */
    font-weight: 500; /* 中等字体粗细 */
    position: relative; /* 为下划线效果设置定位 */
    transition: color 0.3s ease; /* 平滑过渡颜色变化 */
}

.a_style3 a::after {
    content: ""; /* 伪元素，作为自定义下划线 */
    position: absolute;
    left: 0;
    bottom: -2px; /* 下划线距文字底部的距离 */
    width: 100%; /* 下划线宽度 */
    height: 2px; /* 下划线高度 */
    background-color: #0078d7; /* 下划线颜色 */
    transform: scaleX(0); /* 初始状态下缩小到0 */
    transform-origin: left; /* 缩放从左侧开始 */
    transition: transform 0.3s ease; /* 平滑过渡下划线动画 */
}

.a_style3 a:hover {
    color: #0056a4; /* 悬停时更深的蓝色 */
}

.a_style3 a:hover::after {
    transform: scaleX(1); /* 悬停时展开下划线 */
}

.a_style3 a:active {
    color: #003f73; /* 点击时更暗的蓝色 */
}


.a_style4 a {
    text-decoration: none; /* 去掉默认下划线 */
    color: #4a4a4a; /* 深灰色文字，简约且高级 */
    font-weight: 500; /* 适中的文字粗细 */
    position: relative; /* 为伪元素定位 */
    transition: color 0.3s ease; /* 平滑颜色过渡 */
}

.a_style4 a::after {
    content: ""; /* 伪元素用于自定义下划线 */
    position: absolute;
    left: 0;
    bottom: 0; /* 紧贴文字底部 */
    width: 0; /* 初始下划线宽度为 0 */
    height: 1px; /* 下划线高度 */
    background-color: #6c63ff; /* 高级紫色下划线 */
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 缓动动画 */
}

.a_style4 a:hover {
    color: #6c63ff; /* 悬停时文字颜色变为紫色 */
}

.a_style4 a:hover::after {
    width: 100%; /* 悬停时下划线展开 */
}

.a_style4 a:active {
    color: #4a4a4a; /* 点击时文字颜色回归深灰 */
    opacity: 0.8; /* 点击时增加透明度 */
}

/* ============ li标签 ============  */
.clear_li_style {
    list-style: none; /* ul, ol 移除所有列表符号 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
}

/* ============ 卡片樣式 ============  */
.card {
    background-color: hsla(0, 0%, 100%, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
}

.card2 {
    background-color: hsla(0, 0%, 100%, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 10px;
}

/* ============ 浮动 ============  */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ============ 文本 ============  */
/* 文本居中 */
.text_align_center {
    text-align: center;
}