/* 基础样式重置 */
*{margin:0;padding:0;border:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body {font-size:15px;word-wrap: break-word;background-color:#f0f0f0;font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;-webkit-font-smoothing: antialiased;color: #374151;line-height: 1.5;}
table{border-collapse:collapse;border-spacing:0;}
sup{vertical-align:text-top;font-size:small;}
sub{vertical-align:text-bottom;font-size:small;}
hr{border:0;border-top:2px solid #f5f5f5;margin:8px 0;}
a{text-decoration:none;color:#404040;cursor: pointer;}
img{max-width:100%;}
p {margin:0 0 5px 0;}
blockquote{border-left: 4px solid #dadee4;padding: 0 15px;margin-bottom:10px;}
ul, ol{margin: 4px 0 4px 15px;padding: 0;}
pre{max-height: 300px;background:#f3f4f5; overflow: scroll;padding: 7px;}
code{padding: 2px 4px;background:#f3f4f5;}
h1,h2,h3,h4,h5,h6 {font-weight: bold;margin-bottom:5px;}
h1{font-size:28px;}
h2{font-size:24px;}
h3{font-size:20px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}

/*隐藏数字输入框后面的小三角*/
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance: textfield; }

/*滚动条样式*/
::-webkit-scrollbar {width:5px;height:5px;background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius:3px;background-color: #ccc;}
::-webkit-scrollbar-corner{background-color: transparent;}

/*背景*/
body > .bg{z-index: -1;position: absolute;top: 0;left: 0;width: 100%;height:100%;}
body > .bg img{position: fixed;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;backface-visibility: hidden;}
body > .bg img.error {display: none;}
body > .bg .cover {opacity: 1;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, .3) 166%);}

main, navabar{max-width: 666px;}
/* 主容器 */
main{display:block;margin: 0 auto;background-color: rgba(255, 255, 255, 0.95);min-height: 100vh;position: relative;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);overflow: hidden;}

/* 头部封面区域 */
header{display:block;position: relative;width: 100%;padding-top:55%;}
header .bg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;vertical-align: middle;-o-object-fit: cover;object-fit: cover;}
header .user{position: absolute;bottom:-25px;right: 16px;display: flex;align-items: flex-end;gap: 12px;z-index: 10;}
header .user-text{text-align: right;line-height: 2;}
header .user-name {color: white;font-weight: bold;font-size: 18px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);}
header .user-des{height: 26px;line-height: 33px;color:#9ca3af;font-size:small;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);}
header .user-avatar {width:60px;height:60px;border-radius: 8px;border: 2px solid white;overflow: hidden;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);background-color: white;}
header .user-avatar img{width: 100%;height: 100%;object-fit: cover;}

/* 底部导航栏 */
navabar{display:block;position: fixed;bottom: 0;width: 100%;z-index: 40;background-color: rgba(255, 255, 255, 0.7);border-top: 1px solid #5058781a;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
navabar .nav-items {display: flex;justify-content: space-around;align-items: center;height:55px;}
navabar .nav-item {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 25%;cursor: pointer;transition: all 0.3s ease;color: #6b7280;}
navabar .nav-item:not(:last-child){border-right:1px solid #5058781a;}
navabar .nav-item i{font-size: 20px;margin-bottom: 4px;transition: transform 0.3s ease;}
navabar .nav-item span{font-size: 10px;font-weight: 500;}
navabar .nav-item.active {color: #07c160;}
navabar .nav-item.active i{transform: translateY(-2px);}

/* 中间内容 */
container {display:block;padding-top:55px;padding-bottom: 15px;margin-bottom:40px;min-height: 500px;}

/* 动态卡片 */
container article {display:block;padding: 16px;display: flex;gap: 12px;border-bottom: 1px solid #5058781a;}
container article .avatar{flex-shrink: 0;}
container article .avatar img{width:36px;height:36px;border-radius: 5px;object-fit: cover;background-color: #f3f4f6;}
container article .main{flex: 1;min-width: 0;}
container article .main .username{color:gray;font-weight: 600;font-size:13px;margin-bottom: 4px;}
container article .main .username a{font-size: 15px;color: #576b95;margin-right:5px;}
container article .main .content .title{border-bottom:1px solid #5058781a;margin-bottom:15px;padding-bottom:10px;}
container article .main .excerpt{font-size:small;box-shadow: 0px 0 20px 0px #5058781a;margin: 10px 0;border-radius: 15px;background-color: rgba(255, 255, 255, 0.4);padding: 12px;line-height:1.8;}
container article .main .excerpt .title{font-size:15px;}
container article .main .excerpt .text{color:gray;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
/* 信息栏 */
article .footer{margin-top: 8px;}
article .footer *{color: #9ca3af;font-size: 12px;text-decoration: none;}
article .footer .time{margin-right:5px;}
article .footer .comm {padding: 4px 8px;font-size: 12px;float:right;cursor: pointer;transition: all 0.2s ease;}
article .footer .comm:hover {color: #6b7280;}

container.single article{border-bottom:0;padding-bottom:5px;}
container.page article .footer > *:not(.comm),
container.page article .avatar,
container.page article .username
{display:none;}

/* 评论框 */
#comments{width:100%;padding:7px 0 0;background:url(post.funbox.svg);background-position: right -660px top 0;background-repeat: repeat-x;}
#comments .respond{padding:10px 20px;}
/*评论发布框*/
.commentpost{width:100%;margin:5px 0;}
.commentpost .cmt-avatar{position:absolute;width:30px;height:30px;}
.commentpost .cmt-avatar img{display:block;width: 100%;height: 100%;border-radius:3px;}
.commentpost form{position:relative;user-select:none;margin:0 0 0 37px;padding: 3px 10px;border: 1px solid #efefef;border-radius: 5px;background:rgba(255, 255, 255, 0.45);}
.commentpost form *{background:unset;}
.commentpost form input{padding:2px;width:calc(100% / 3 - 15px);border:0 none;border-bottom:1px solid #efefef;color:#66758c;outline:none;}
.commentpost form label{display:inline-block;width:18px;color:#ccc;text-align: center;}
.commentpost form textarea{width:100%;height:44px;resize:none;border:0 none;outline:none;padding: 5px 0;color:#66758c;}
.commentpost form .submit{width:auto;cursor: pointer;background: #fff;border:0;padding: 0;color: #9ca3af;}
.commentpost form input::-webkit-input-placeholder, .commentpost form textarea::-webkit-input-placeholder{color:#ddd;}
.commentpost form .cancel-comment-reply{float:right;}
.commentpost form .cancel-comment-reply a{margin-right:8px;color: #9ca3af;}
/* 评论列表 */
.comment-list, .comment-list ol{list-style: none;color:#1f2937;margin:0;font-size:13px;}
.comment-list a{color:#1f2937;}
.comment-list li{padding:8px 0;margin:0;border-bottom:0.05rem solid #f1f3f5;}
.comment-list .cmt-content{margin:3px 0 0 44px;}
.comment-list .cmt-ava{position:absolute;width:30px;height:30px;user-select:none;}
.comment-list .cmt-ava img{width:100%;height:100%;border-radius:50%;}
.comment-list .cmt-hea{height:24px;line-height:24px;user-select:none;}
.comment-list .cmt-hea a{max-width:100px;margin-right:5px;overflow:hidden;color:#1f2937;}
.comment-list .cmt-hea time{max-width:100px;overflow:hidden;color:#9ca3af;}
.comment-list .cmt-hea .comment-reply a{float:right;font-weight:normal;color:#9ca3af7d;font-size:smaller;}

.comment-list ul li{padding:8px 0 0 0;border-top:1px solid #f1f3f5;border-bottom:0;}


/* 底部加载提示 */
.load-more {text-align: center;padding:15px 0;}
.load-more *{color: #9ca3af;font-size: 12px;}

/* 搜索模态框 */
.search-modal {
position: fixed;
inset: 0;
z-index: 60;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
opacity: 0;
transition: opacity 0.3s ease;
}

.search-modal.show {
display: flex;
opacity: 1;
}

.search-content {
background-color: white;
width: 100%;
max-width: 480px;
margin: 0 auto;
border-radius: 0 0 16px 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 16px;
transform: translateY(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal.show .search-content{
transform: translateY(0);
}

.search-bar {
display: flex;
align-items: center;
gap: 12px;
background-color: #f3f4f6;
border-radius: 9999px;
padding: 8px 16px;
}

.search-icon {
color: #9ca3af;
}

.search-input {
background-color: transparent;
border: none;
outline: none;
flex: 1;
font-size: 14px;
color: #1f2937;
height: 32px;
}

.search-input::placeholder {
color: #9ca3af;
}

.search-button {
color: #07c160;
font-weight: 500;
font-size: 14px;
padding: 0 8px;
background: none;
border: none;
cursor: pointer;
}

.search-tags {
margin-top: 16px;
}

.search-tags-title {
font-size: 12px;
color: #9ca3af;
margin-bottom: 8px;
padding: 0 8px;
}

.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 8px;
}

.tag {
background-color: #f3f4f6;
color: #6b7280;
font-size: 12px;
padding: 4px 12px;
border-radius: 9999px;
cursor: pointer;
}

.tag:hover {
background-color: #e5e7eb;
}