:root {
    --bg-1: #FFFFFF;
    --bg-2: #FCFCFC;
    --bg-3: #E9ECEF;
    --text-1: #121212;
    --text-2: #363c43;
    --text-3: #6C757D;
    --a-color: #065da9;
    --a-hover: #ea7d00;
    --br-1: #E9ECEF;
    --br-2: #CCCCCC;
    --br-3: #212529;

}

@media (prefers-color-scheme:dark) {
    :root {
        --bg-1: #0F1419;
        --bg-2: #14191E;
        --bg-3: #2C2C2C;
        --text-1: #FFFFFF;
        --text-2: #EAEAEA;
        --text-3: #A0A0A0;
        --a-color: #096fc9;
        --a-hover: #ea7d00;
        --br-1: #282828;
        --br-2: #333333;
        --br-3: #333333;
    }
}


/* 全局样式 */
* {box-sizing: border-box;border-width: 0;border-style: solid;border-color:var(--bg-1);margin: 0;padding: 0}
body {background-color: var(--bg-1);min-height: 100vh;min-height: 100svh;color: var(--text-1);font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif;line-height: 1.5;-webkit-font-smoothing: antialiased; font-size: 16px; min-width: 340px;}
a {color: var(--a-color);text-decoration: none}
a:hover {color: var(--a-hover);}


h1,h2,h3,h4{line-height: 1.3;}

/* h1{font-size: 24;font-weight: 700;}
h2{font-size: 2rem;font-weight: 600;margin: 2rem 0 1rem 0}
h3{font-size: 1.8rem;font-weight: 600;margin: 2rem 0 1rem 0}
h4{font-size: 1rem;font-weight: 500;}
.t-center{text-align: center;}
.button-icon {cursor: pointer;background-color: transparent;border: none;color:var(--text-1);} */


.m-auto {max-width: 1200px;min-width: 340px;margin: 0 auto;}

/* 头尾样式 */
.header {border-bottom: 1px solid var(--br-1);}
.header-container {display: flex;;padding: 0 8px;flex-direction: column;}
.header-logo{width: 160px;height: 50px;}
.header-logo img{margin-top: 5px;}
.header-nav{flex: 1;padding: 0 15px;height: 50px;}
.header-nav ul{ list-style: none;display: flex;gap: 2rem; align-items: center;line-height: 48px;overflow-x: auto;white-space: nowrap}
.header-nav li{position: relative;}
.header-nav li a{color: var(--text-1); font-weight: 700;}
.header-nav li.nav-current a{color: var(--text-0);}
.nav-current::after{border-bottom: 3px solid var(--br-3);content: " ";position: absolute;bottom: 0;left: 0;right: 0;}
.footer{border-top: 1px solid var(--br-1);}
.footer-container {text-align: center;padding: 1rem;margin-top: 1rem; font-size: 14px;}
.footer-container p {padding: 8px 0; color: var(--text-2);}
.footer-container a {padding: 0 8px;color: var(--text-1);}


/* 主体内容 */
.block-1{background-color: var(--bg-2);border-bottom: 1px solid var(--br-1);}
.p-8{ padding:8px}
.flex-2{display: flex;flex-direction: column;}
.flex-2 main{padding: 10px; min-height: 80vh;}
.flex-2 aside{padding: 10px;}


.breadcrumbs{padding:  5px 0  8px 0;}
.breadcrumbs ol{display: flex;overflow: hidden;padding: 0 5px; max-width: 100%;}
.breadcrumbs li{white-space: nowrap;flex: 0 0 auto;overflow: hidden;text-overflow: ellipsis; font-size: 13px; color: var(--text-2);}
.breadcrumbs a{color: var(--text-1);}
.breadcrumbs li:last-child{flex: 1 1 auto;text-overflow: ellipsis; overflow: hidden;}
.breadcrumbs li +li::before{display: inline-block;content: ""; width: 5px;height: 5px;border-style: solid;border-width: 1px 1px 0px 0px;border-color:var(--br-2);margin: 1px 6px;transform: rotate(45deg);} 

.box {border-radius: 6px; box-shadow: 0 0 5px var(--br-2);margin-bottom: 10px; padding: 10px;}



.article-details {padding-top: 10px}
.article-details h1 {font-weight: 700;font-size: 30px;margin: 10px 0 10px 0}
.article-details h2 {font-weight: 700;font-size: 24px;margin: 15px 0 10px 0}
.article-details h3 {font-weight: 600;font-size: 20px;margin: 15px 0 10px 0}
.article-details h4 {font-weight: 600;font-size: 18px;margin: 15px 0 10px 0}
.article-details p {margin-bottom: 20px;line-height: 1.5;}
.article-details figure {text-align: center;margin: 1rem auto}
.article-details figure img {max-width: 100%;border-radius: 3px}
.article-details figcaption {color: var(--text-3)}
.article-details ul, .article-details ol {margin-left: 25px; margin-bottom: 20px;}
.article-details li {margin-bottom: 8px;}
.article-details blockquote {border-left: 4px solid var(--br-2); background-color: var(--bg-3);padding: 10px; margin-bottom: 20px;}
.article-author{display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-3); font-size: 14px;}
.article-author img{border-radius: 50%; width: 20px; height: 20px;}
.article-summary{font-size: 16px; color: var(--text-2); margin-bottom: 15px;border: 1px dashed var(--br-2); padding: 10px; border-radius: 5px; background-color: var(--bg-2);}

.aside h2{font-size: 18px; font-weight: 600; margin-bottom: 10px;}
.aside h3{font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.aside h4{font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.aside-list ul{margin-left: 25px;}
.aside-list li{margin-bottom: 8px; font-size: 14px;}

@media (min-width:640px) { 
    .header-container{flex-direction: row}
}

@media (min-width:768px) {    
    .flex-2{flex-direction: row; gap: 20px;}
    .flex-2 main{flex: 1;}
    .flex-2 aside{width: 300px; }
 }





/*





.box-green {border-left: 3px solid #068d0f;}



.article-list h2,.article-list h3 {display: flex; align-items: center;gap: 0.5rem;}
.article-list ul{display: flex;flex-direction: column;gap: 0.5rem; margin-top: 0.5rem;}
.article-list-a{display: flex;gap: 0.3rem; flex-direction: column;}
.article-list-a time{color: var(--text-2); font-size: 0.8125rem;}


.article-user {display: flex;align-items: center}
.article-user img {border-radius: 3px;width: 2rem;height: 2rem;margin-right: .5rem}
.article-user time {color: var(--text-gray-2)}
.article-details-main {padding-top: 1rem}
.article-details p {margin-bottom: 1.5rem}
.article-details figure {text-align: center;margin: 1rem auto}
.article-details figure img {max-width: 100%;border-radius: 3px}
.article-details figcaption {color: var(--text-2)}
.article-details h1 {font-weight: 700;font-size: 2.4rem;margin: 1rem 0 1rem 0}

.article-details header {margin-bottom: 1rem}



.article-footer {
    border-top: 1px solid var(--br-1);
    padding: 1rem 0;
    display: flex;
    gap: .5rem
}

.article-footer a {
    background-color: var(--bg-2);
    padding: .25rem .5rem;
    font-size: .8125rem;
    border-radius: .125rem;
    color: var(--text-2)
}


.more-article {
    padding: 1rem;
}

.more-article h2 {
    border-left: 5px solid #555555;
    padding-left: 1rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.more-article ul {
    list-style: none;
}

.more-article li {
    margin-bottom: 1rem;
}

.more-article h3 {
    font-size: 0.8125rem;
    color: var(--text-gray-1);
    font-weight: 500;
}

.more-article h3:hover {
    color: var(--text-link);
}

.more-article time {
    font-size: 0.75rem;
    color: var(--text-gray-3);
}


.w-full {
    width: 100%
}