/* 定义滚动条宽度（竖向）、高度（横向）及背景（容器） */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f7f3e9;
    border-radius: 10px;
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
    cursor: pointer;
}

/* 去除底部白点 */
::-webkit-scrollbar-corner {
    width: 0;
    height: 0;
}

/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
    background: #B2B2B2;
}

/* 英文字体 */
@font-face {
    font-family: 'englishFont';
    src: url('en.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 中文字体 */
@font-face {
    font-family: 'chineseFont';
    src: url('zh.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-text-color: #333;
    --minor-text-color: #666;
    --mini-text-color: #8a8678;

    --color-primary: #4f8862;
    --color-secondary: #ec9b5b;
    --color-warning: #e67e22;

    --bg-color-primary: #fffdf6;
}

* {
    font-family: englishFont, chineseFont, sans-serif !important;
    box-sizing: border-box;
}

body {
    margin: 0;
    /*background-color: #f7f3e9;*/
    font-size: 14px;
    color: var(--primary-text-color);
    min-height: 101vh;
    background: #f7f3e9 linear-gradient(to top right, #f7f3e9 0%, #f7f3e9 30%, #f7f3e9 60%, #e8efe4 100%) no-repeat fixed center center;
}

/************************** 卡片 ********************************/
.card {
    background-color: var(--bg-color-primary);
    border: 2px dashed #ddd0b5;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(82, 64, 38, 0.1);
    padding: 15px;
    margin-top: 20px;
}
.card-title {
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title span {
    margin-left: 4px;
}

/************************** 布局 ********************************/
.box {
    width: 1460px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

.box .left {
    width: 260px;
    position: sticky;
    top: 0;
    height: fit-content;
}

.box .center {
    width: 900px;
    min-height: 900px;
}

.box .right {
    width: 260px;
    position: sticky;
    top: 0;
    height: fit-content;
}

/************************** 导航 ********************************/
.nav-head {
    background-image: url("/common/head_bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 94px;
}

.nav-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-top: 15px;
}

.nav-title a {
    color: var(--primary-text-color);
    text-decoration: none;
    transition: all .2s;
}

.nav-title a:hover {
    color: var(--color-primary);
}

.nav-info {
    font-size: 14px;
    color: var(--minor-text-color);
    margin-top: 10px;
    text-align: center;
}


.nav-item a {
    padding-top: 10px;
    padding-bottom: 2px;
    color: var(--primary-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all .2s;
    border-bottom: 1px dashed var(--bg-color-primary);
    margin-right: 4px;
}

.nav-item a span {
    margin-left: 6px;
}

.nav-item a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
    margin-left: auto;
}

.nav-item a:hover {
    border-bottom: 1px dashed var(--color-primary);
}
.nav-item a:hover::after {
    background-color: #ec9b5b;
}

/************************** 分类 ********************************/
.cat-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 0 4px 0;
    border-bottom: 1px dashed #ddd0b5;
    transition: all .2s;
    color: var(--primary-text-color);
    margin: 0 4px;
}
.cat-item a:last-child {
    border-bottom: 1px dashed #fffdf6;
}
.cat-item a span:nth-child(1) {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-primary);
}
.cat-item a span:nth-child(2) {
    margin-left: 12px;
}
.cat-item a span:nth-child(3) {
    margin-left: auto;
    font-size: 12px;
    color: var(--mini-text-color);
}

.cat-item a:hover {
    border-bottom: 1px dashed var(--color-primary);
}

.cat-item a:nth-child(6n+1) span:nth-child(1) { background-color: #4f8862; }
.cat-item a:nth-child(6n+2) span:nth-child(1) { background-color: #e67e22; }
.cat-item a:nth-child(6n+3) span:nth-child(1) { background-color: #3498db; }
.cat-item a:nth-child(6n+4) span:nth-child(1) { background-color: #e74c3c; }
.cat-item a:nth-child(6n+5) span:nth-child(1) { background-color: #f1c40f; }
.cat-item a:nth-child(6n+6) span:nth-child(1) { background-color: #9b59b6; }

/************************** 底部 ********************************/
.footer {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--minor-text-color);
}
.footer a {
    color: var(--minor-text-color);
    text-decoration: none;
}

/************************** 管理 ********************************/
.mag {
    position: fixed;
    right: 0;
    top: 10vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-primary);
    border-radius: 12px 0 0 12px;
    box-shadow: 0 10px 22px rgba(82, 64, 38, 0.1);
    padding: 15px;
}
.mag a {
    text-decoration: none;
    color: var(--minor-text-color);
    transition: all .2s;
    padding: 4px 0;
    border-bottom: 1px dashed var(--bg-color-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.mag a:hover {
    border-bottom: 1px dashed var(--color-primary);
}


/*********************** 统计 ***********************/
.count-item {
    display: flex;
    padding: 8px 4px;
    font-size: 13px;
}

.count-item > div {
    flex: 1;
    text-align: center;
}

.count-item > div > div > span:nth-child(1) {
    font-size: 15px;
    color: var(--color-primary);
}

.count-item > div > div > span:nth-child(2) {
    font-size: 12px;
    margin-left: 4px;
    color: var(--mini-text-color);
}

.count-item > div > div:nth-child(2) {
    margin-top: 4px;
    color: var(--minor-text-color);
}

.count-link {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
}

.count-link a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 4px;
    font-size: 13px;
    color: var(--minor-text-color);
    transition: all .2s;
}

.count-link a:hover {
    color: #4f8862;
}