/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素字体大小设置 */
:root {
    font-size: 16px;
}

/* 常用元素样式重置 */
body {
    line-height: 170%;
    scrollbar-gutter: stable both-edges; /* 为整个页面预留滚动条空间 */

    letter-spacing: 0.5px!important;
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #000;

    background-color: #f5f7f8;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


a {
    color: #0a8be1;
    text-decoration: none;
}
a:hover {
    color: #044d7d;
}

.none {
    display: none!important;
}


/**/
.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: .625rem 1.875rem;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1100px;

    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 0 1.25rem;
}

.header h1 {
    font-size: 1.2rem;
}

.header h1 a {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}


.header nav ul {
    display: flex;
    flex-direction: row;
    padding: .625rem;
}
.header nav ul li {
    margin: 0 .8125rem;
}
.header nav ul li a {
    color: #000;
}
.header nav ul li a.active {
    color: #0a8be1;
    font-weight: bold;
}
.header nav ul li a:hover {
    color: #0a8be1;
    font-weight: bold;
}

.main {
    flex: 1;
    padding-top: 5.5rem;
}

.footer {
    margin-top: 3rem;
    padding: .625rem 1.875rem;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.footer-links {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


.footer p {
    font-size: .875rem;

    color: #000;
}
.footer p a {
    color: #000;
}
.footer p a:hover {
    color: #0a8be1;
}



/** main-content **/
.main-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 3rem;
    
}

.main-content h2 {
    font-size: 1.3rem;
    color: #333;
}

.section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    background-color: #fff;
    padding: 1.25rem;
}

.right {
    color: #2ecc71;
}

.wrong {
    color: #e74c3c;
}

.no-score {
    color:#7f8c8d;
}

.ac {
    color: #333;
    background-color: #7cf07c;
    border: 1px solid #666;
    border-radius: 5px;
}

.wa {
    color: #333;
    background-color: #f07c7c;
    border: 1px solid #666;
    border-radius: 5px;
}


details summary {
    cursor: pointer;
}


.page-nav {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    gap: .6rem;
}
.page-nav a {
    color: #333;
}
.page-nav a:hover {
    color: #0a8be1;
}
.page-nav a.disabled {
    color: #999;
    pointer-events: none; /* 完全禁用点击事件 */
    cursor: default;
}


/*封面边框*/
.cover-border {
    border: 5px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}

.cover-border:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s;
}


/** toast **/
.toast-container {
    width: 400px;
    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.toast-container.doing {
    background-color: rgba(0, 164, 46, 1);
}

.toast-container.doing .toast-message {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.enter-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.enter-button a {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: .5rem 1rem;
}

.enter-button a:hover {
    background-color: rgb(2, 68, 20);
}

.toast-container.show {
    opacity: 1;
    visibility: visible;
}

.toast-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.toast-title .toast-title-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .8rem;
}

.toast-title a {
    color: #fff;
}

.toast-title a:hover {
    color: red;
}

.toast-message {
    font-size: 1.1rem;
    color:#fff;
}

.close-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

.close-button a {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: .5rem 1rem;
}

.close-button a:hover {
    background-color: #333;
}