body {color: #1b1b1b; font-family: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "WenQuanYi Micro Hei","Microsoft Yahei", serif; font-size: 14px; background: #fff; padding: 0; margin:0;}
a {color: #1e8500; text-decoration: none;}
a:hover, a:active {color: #6bc30d;}
img {border-style: none}
button,input,optgroup,select,textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0}
button,input {overflow: visible}
button,select {text-transform: none}
pre, code {background: #F3F3F3; font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace; font-size: 1em;}
code {padding: 2px 4px; color: #B94A48;}
pre {overflow: auto; position: relative;}
pre > code {padding: 0; color: #1b1b1b;}
pre:has(code) {background-color: #ededed; border-left: 5px solid #adacac; border-radius: 5px; margin: 20px 0}
pre .copy-btn {position: absolute; top: 2px; right: 2px; padding: 5px 10px; font-size: 12px; background-color: #2ea7e0; color: white; border: none; border-radius: 3px; cursor: pointer; display: none;}
pre:hover .copy-btn {display: inline-block;}
pre .copied {background-color: #6bc30d;}
pre .copy-btn:hover::after {display: block;}
blockquote {margin: 1em 0; padding-left: 1.5em; border-left: 4px solid #eee; color: #1b1b1b;}
table {border: 1px solid #ddd; width: 100%;}
table th, table td {padding: 5px 10px; border: 1px solid #eee;}
table th {background: #f3f3f3;}
h1, h2, h3, h4, h5, h6 {font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif;}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {padding: 5px; border: 1px solid #999999; width: 100%; border-radius: 4px; box-sizing: border-box;}
textarea {resize: vertical;}
.clearfix {zoom: 1;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.container {width: 100%; max-width: 1440px; margin: auto;}
.header {border-bottom: 4px #4F9748 solid; display: flex; flex-direction: column;}
#logo {display: flex; justify-content: space-between; padding:10px 0;align-items:center}
.logo {color: #1b1b1b; font-size: 2.5em; display: flex; align-items: center; white-space: nowrap; font-weight: 500;}
.logo img {max-height: 68px; width: 168px;}
.description {display: none;}
nav {box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px; padding: 5px 0; background-color:#f5fcf5}
nav .container {display: flex; justify-content: space-between; align-items: center;}
nav .container .menu {flex:1; display: flex; align-items: center;}
nav .container .menu a {font-weight: 600; padding: 8px; display: inline-block; border-radius: 5px; color:#384248;}
nav .container .menu a.current {background-color: rgb(0, 0, 0, 0.1);}
.box {display: flex;}
.post-content a {text-decoration: underline}
.post-content a:hover {background-color: #E7F0F9}
.post-meta a, .widget a, .comment-content a {border-bottom-color: transparent; color:rgb(87, 119, 96)}
.post-meta a:hover, .widget a:hover, .comment-content a:hover {border-bottom: 1px solid #5e5e5e;}
#search {position: relative; min-width: 200px; margin-left: 5px; margin-right: 5px; box-shadow: rgb(255, 255, 255) -12px 0px 6px -6px;}
#search input {padding: 5px; width: 100%; border-radius: 5px;}
#search button {position: absolute; right: 5px; top: 4px; width: 25px; height: 25px; background: transparent url(img/icon-search.png) no-repeat center center; border: none; text-indent: -99999px;}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#search button {background-image: url(img/icon-search@2x.png); background-size: 24px 24px;}
}
#body {margin: 0; overflow: hidden;}
#main {padding-right:15px;flex:1;max-width: 100%;overflow: hidden;}
.post {padding: 15px 0; border-bottom: 1px solid #EEE; display: block; overflow: hidden;}
.post:hover {border-color: #ccc; border-radius: 5px}
.post .fm {width: 120px; border-radius: 5px; border:1px solid #f7f7f7; overflow: hidden; aspect-ratio: 4 / 2.5; margin-right: 15px; position: relative; float: left;}
.post .fm img {object-fit: contain; width: 100%; height: 100%;}
.post .fm:before {background: rgba(255,255,255,0.3); bottom: 0; content: ""; left: 50%; position: absolute; right: 51%; top: 0; opacity: 1; pointer-events: none; z-index: 1; transition: all .9s ease-in-out; -webkit-transition: all .9s ease-in-out; -moz-transition: all .9s ease-in-out; -ms-transition: all .9s ease-in-out; -o-transition: all .9s ease-in-out}
.post .fm:after {background: rgba(255,255,255,0.3); bottom: 50%; content: ""; left: 0; position: absolute; right: 0; top: 50%; opacity: 1; pointer-events: none; z-index: 1; transition: all .9s ease-in-out; -webkit-transition: all .9s ease-in-out; -moz-transition: all .9s ease-in-out; -ms-transition: all .9s ease-in-out; -o-transition: all .9s ease-in-out}
.post:hover .fm:before {left: 0; right: 0; opacity: 0}
.post:hover .fm:after {top: 0; bottom: 0; opacity: 0}
.post-views {display: flex; flex-direction: column; text-wrap: nowrap; text-align: center; padding: 10px; align-content: center; justify-content: space-evenly; align-items: center; color: #ac560e; margin-right: 15px; font-size: 14px;min-width:50px}
.post-views span {font-size: 12px}
.post-text {display: flex; flex: 1; flex-direction: column; justify-content: space-around;}
.post-text .post-content {color: #5b5b5b}
.post-title {margin: 0 0 5px; font-size: 18px; font-weight: bold; line-height: 25px;}
h1.post-title {font-size: 22px;}
.post-title a {border-bottom-color: transparent;}
.post-meta {padding: 5px 0; color: #777; font-size: 13px; border-bottom: 1px solid #dcdcdc; margin: 0;}
.post-meta li {display: inline-block; margin: 0 8px 0 0; padding-left: 12px; border-left: 1px solid #EEE;}
.post-meta li:first-child {margin-left: 0; padding-left: 0; border: none;}
.post-meta a {color: #777;}
.post-bottom {display: flex; justify-content: space-between; color: #ccc}
.post-bottom span a {display: inline-block; font-size: 12px; padding: 0 .375rem; height: 1.5rem; line-height: 1.5rem; border-radius: .1875rem; background-color: rgba(78, 214, 187, 0.1);}
.post-bottom span a:hover {-webkit-filter: brightness(75%); -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -o-transition: all .1s ease; -ms-transition: all .1s ease; transition: all .1s ease; text-decoration: none; background-color: rgba(150, 0, 0, 0.2)}
.post-content, .comment-content {line-height: 1.5; word-wrap: break-word;}
.post-content img, .comment-content img, .post-content video, .comment-content video {max-width: 100%;}
.post-content a img, .comment-content a img {background: #FFF; position: relative; bottom: -4px;}
.post-content hr, .comment-content hr {margin: 2em auto; width: 70%; min-width: 100px; border: 1px dashed #bf9f9f;}
.post-near {list-style: none; padding: 20px 0; padding: 0; color: #1b1b1b; border-left: 2px solid #808080; border-radius: 5px; padding-left: 5px;}
.post-near li {margin: 10px 0;}
.archive-title {color: #bbb; font-size: 1em;}
.more {text-align: center;}
.more a {border: none;}
.protected .text {width: 50%;}
.relative {margin: 40px 0;}
.relative > .post:last-child {border-bottom: unset}
.page-navigator {list-style: none; margin: 25px 0; padding: 0;text-align:center}
.page-navigator li {display: inline-block; margin: 0; background: #007f3f;}
.page-navigator a , .page-navigator span {display: inline-block; padding: 0 15px; height: 35px; line-height: 35px; font-weight: bold; color: #fff; font-family: Microsoft Yahei;}
.page-navigator a:hover {background: #009634; text-decoration: none;}
.page-navigator .current a {color: #fff; background: #009634;}
#comments {padding-top: 15px;}
.comment-list, .comment-list ol {list-style: none; margin: 0; padding: 0;}
.comment-list li {padding: 14px; margin-top: 10px; border: 1px solid #EEE;}
.comment-list li.comment-level-odd {background: #F6F6F3;}
.comment-list li.comment-level-even {background: #FFF;}
.comment-list li.comment-by-author {background: #FFF9E8;}
.comment-list li .comment-reply {text-align: right; font-size: .92857em;}
.comment-meta a {color: #1b1b1b; font-size: .92857em;}
.comment-author {display: block; margin-bottom: 3px; color: #1b1b1b;}
.comment-author .avatar {float: left; margin-right: 10px;}
.comment-author cite {font-weight: bold; font-style: normal;}
.comment-list .respond {margin-top: 15px; border-top: 1px solid #EEE;}
.respond .cancel-comment-reply {float: right; margin-top: 15px; font-size: .92857em;}
#comment-form label {display: block; margin-bottom: .5em; font-weight: bold;}
#comment-form .required:after {content: " *"; color: #C00;}
#secondary {padding:15px 0 15px 15px; word-wrap: break-word; width: 220px; border-left: 1px solid #f7f7f7;}
.widget {margin-bottom: 30px;}
.widget-title, .relative-title {text-transform: uppercase; margin: 0; }
.widget-title span, .relative-title span {display: inline-block; font-size: 14px; color: #007f3f;}
.widget-list {list-style: none; padding: 0; margin: 5px 0;}
.widget-list li {margin: 5px 0; line-height: 1.6; border-bottom: 1px solid #eee; padding: 5px 0;}
.widget-list li ul {margin-left: 15px;}
.widget-list.rank {counter-reset: section;}
.widget-list.rank > li::before {
    counter-increment: section; 
    content: counter(section); 
    display: inline-block; 
    text-align: center; 
    margin-right: 5px; 
    height: 18px; 
    width: 18px; 
    line-height: 18px; 
    background: #b8c2cc; /* 默认背景色，用于21项及以后 */
    color: #fff; /* 默认字体颜色 */
    border-radius: 50% 0 50% 50%; 
    font-size: 12px;
}

/* 前三名保持不变 */
.widget-list.rank > li:nth-child(1)::before,
.widget-list.rank > li:nth-child(2)::before,
.widget-list.rank > li:nth-child(3)::before {
    color: #fff;
}
.widget-list.rank > li:nth-child(1)::before { background: #D40036; }
.widget-list.rank > li:nth-child(2)::before { background: #2ea7e0; }
.widget-list.rank > li:nth-child(3)::before { background: #6bc30d; }
.widget-list.new > li,.widget-list.rank > li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.widget-list.new > li:hover,.widget-list.rank > li:hover {white-space: normal}
.widget.sidecmt a, .widget.sidecate a {font-weight: bold;}
.category {display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-around}
.category a {display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(50% - 10px); box-sizing: border-box; text-decoration: none; color: inherit;}
.category a img {margin-bottom: 5px; width: 100%;}
.copyright {padding: 8px 0; color: #999; display: flex; justify-content: space-between;border-top: 1px solid #f7f7f7;}
.copyright a {color: #999;}
.hidden {display: none !important; visibility: hidden;}
.sr-only {border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.sr-only.focusable:active, .sr-only.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}
.titletext {font-size: 2.5em; line-height: 1.3em; margin-bottom: 1em; color: #1b1b1b; text-align: center;}
.subtext {font-size: 1.3em; line-height: 1.3em; font-style: italic; margin-bottom: 1.3em; color: #999; text-align: center;}
.subtext span {border-bottom: 1px dotted #999;}
.options {display: flex;}
.options > div {flex: 1; margin-top: 1.5em; padding: 1.5em;}
.options .block1 {color: #2b3929; background: #d8f2c9;}
.options .block2 {color: #35444d; background: #d6ebf4;}
.options .block3 {color: #35444d; background: #f7efdb;}
.notes {margin: 0; padding: 1.5em; border-top: 0.063em solid #dedede; background: #eee; clear: both; font-size: 12px;}
.notes li {margin-bottom: 0.733em;}
.notes > p {font-size: 14px; font-weight: 500;}
.notes blockquote {margin: 1em 0; padding: 1em 1em 0.125em; background: #f1f5f9;}
.promo-container {padding: 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px;}
.promo-container a {text-align: center; display: block; padding: 4px; border-radius: 4px; text-decoration: none; font-size: 12px; transition: all 0.2s ease; background: #f8fafc; border: 1px solid #e2e8f0; animation: shine 3s linear infinite;}
.promo-container a.purple {color: #8b5cf6; background: linear-gradient(145deg, #f5f3ff, #ffffff);}
.promo-container a.orange {color: #f59e0b; background: linear-gradient(145deg, #fff7ed, #ffffff);}
.promo-container a.green {color: #10b981; background: linear-gradient(145deg, #f0fdf4, #ffffff);}
.promo-container a:hover {transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);}
@media (max-width: 1200px) {
.promo-container {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 768px) {
.promo-container {grid-template-columns: repeat(3, 1fr); gap: 10px;}
.promo-container a {font-size: 13px; padding: 10px;}
}
@media (max-width: 480px) {
.promo-container {grid-template-columns: repeat(2, 1fr);}
}
@keyframes shine {0% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.tools {display: flex; gap: 20px; padding: 5px 0; flex-wrap: wrap;}
.tools .tool {cursor: pointer; background-color: #f5f5f5; padding: 5px 5px 5px 60px; background-repeat: no-repeat; background-size: 40px 40px; background-position: 10px center; border-radius: 8px; flex-grow: 1; flex-basis: 220px; box-sizing: border-box; white-space: nowrap;}
.tools .tool.img2base {background-image: url('https://tool.lvtao.net/static/index/img2base.svg');}
.tools .tool.csr {background-image: url('https://tool.lvtao.net/static/index/csr.svg');}
.tools .tool.resize {background-image: url('https://tool.lvtao.net/static/index/resize.svg');}
.tools .tool.pix {background-image: url('https://tool.lvtao.net/static/index/pix.svg');}
.tools .tool.excel {background-image: url('https://tool.lvtao.net/static/index/excel.svg');}
.tools .tool.email {background-image: url('https://tool.lvtao.net/static/index/email.svg');}
.archives {position: relative}
.archives::before {width: 2px; height: 100%; background: #bbb; display: block; content: ""; position: absolute; top: 0; left: 49px}
.archives .archives-item {position: relative}
.archives .archives-item h2 {font-size: 12px!important; background: #fcfcfc; width: 84px; line-height: 24px; text-align: center; border-radius: 4px; position: relative; z-index: 10; left: 15px; cursor: pointer; border: 1px solid #bbb}
.archives .archives-item ul {padding-left: 0; list-style: none}
.archives .archives-item ul li {font-size: 14px; display: flex; align-items: center; padding: 6px 0}
.archives .archives-item ul li:hover .timeline {background: #ff4242}
.archives .archives-item ul li .day {display: block; width: 36px; text-align: center; flex: none}
.archives .archives-item ul li .timeline {width: 8px; height: 8px; background: #bbb; border-radius: 50%; margin: 0 10px; flex: none}
.alert-expiration {color: #fff8dc; background-color: #cb0101; border-color: #b8e3f2; padding: 8px 5px; margin-top: 2px; border-radius: 2px;}
.content-copyright .content-copyright {margin: 2px 0}
@media (max-width: 980px) {
    nav .container {
        flex-direction: column;
        width: 100%; /* 确保容器宽度为100% */
        overflow: hidden; /* 防止内容溢出 */
    }
    nav .container .menu {
        flex-wrap: nowrap; /* 防止菜单项换行 */
        overflow-x: auto; /* 添加横向滚动 */
        -webkit-overflow-scrolling: touch; /* 在iOS上提供平滑滚动 */
        scrollbar-width: none; /* 隐藏滚动条（Firefox） */
        width: 100%; /* 确保菜单容器宽度为100% */
        max-width: 100%; /* 防止超出父容器 */
        margin: 0 -15px; /* 抵消父容器的padding，使滚动区域更宽 */
        padding-left: 15px; /* 恢复左侧padding */
    }
    nav .container .menu::-webkit-scrollbar {
        display: none; /* 隐藏滚动条（Chrome, Safari, Edge） */
    }
    nav .container form {
        width: 95%;margin-top: 10px;
    }
    nav .container .menu a {
        white-space: nowrap;
        flex-shrink: 0; /* 防止菜单项被压缩 */
    }
    .options{flex-direction: column;}
    .post{padding:15px;}
    .post .fm, .description, .sidebar {
        display: none;
    }
}