body{color: #333;width:100%;height: 100%;background: #f9f9f9;font-size: 14px;font-family: Arial,sans-serif;}
body,ul,li,u,i,h1,h2,h3,tr,td,form {margin:0px;padding:0px;list-style-type: none;font-style: normal;text-decoration: none;}
a {color: #1a73e8;text-decoration: none;}
a:hover {color: #ff6600}
h3 {font-size: 16px; line-height: 1.3;}

.header,h1 {text-align:center}

textarea,input{padding:10px;border:1px solid #ccc;width:100%;box-sizing:border-box;margin-bottom:10px;border-radius: 5px;vertical-align:middle}
.box textarea {height: 100px;}

.bar {position: relative;box-shadow: 0 0 5px 0 rgba(64,60,67,.16);padding:10px 10px;text-align:right;background: #fff;font-size:16px;}
.bar ul{position: relative;}
.bar a {display: inline-block;margin:5px;padding: 5px 0px;}
.bar .home {position: absolute;left:0}
.bar .home img{margin-top:-5px;}
.bar .face {width: 20px;height: 20px;border-radius: 100%;}
.bar .name {color:#e9aa1e}


.clear_notice {
	cursor: pointer;
	background: #f9f9f9;
	padding:5px 0px 5px 0px;
}

.hot {
    display: block;
    margin: 20px 10px;
    text-align: center;
    vertical-align: middle;
}
.hot a {
    display: inline-block;
    margin: 0px 9px;
	color: #666;
}
.hot i.icon {
    font-size: 20px;
	display: block;
}

.b300 {
	text-align: center;
	padding: 5px;
	margin-bottom:10px;
}

.h100 {
	display: inline-block;
	height: 100px;
	overflow: hidden;
	text-align: center;
	margin: 5px;
}

.rainbow-text {
  background: linear-gradient(45deg, #ff5e5e, #ebeb02, #6d62fb, #3cdd1f, #ff00f7, #fb00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rainbow1 {
	background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet);
	background-size: 300% 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbowMove 2s linear infinite;
}

.rainbow2 {
	background: linear-gradient(135deg, #FFD700, #FFCC00, #FFB300, #FF9900, #CC8400, #B57700);
	background-size: 300% 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbowMove 2s linear infinite;
}

@keyframes rainbowMove {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 100%; /* 使中间位置的背景移动到另一端 */
  }
  100% {
    background-position: 100% 0;
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.magnet {padding:10px;}
.magnet ul {margin-bottom:20px;padding:20px;border:1px solid #eee;background: #fff;border-radius: 10px;}
.magnet ul h3 {font-size:16px;font-weight:normal;margin-bottom:20px}
.magnet li {display: inline-block;margin-right:20px;font-size:14px;}

.chatfull {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99998;
	background: #fff;
	overflow: auto;
}

.notice {position: fixed;left: 10px;bottom: 80px;display: none;z-index: 99999;box-shadow: 0 0 5px 0 rgba(64,60,67,.16);background: #fff;padding:10px;}
.notice li {position: relative;padding: 8px 0px; padding-right: 20px;margin-bottom: 1px; font-size: 12px;border-radius: 2px;}
.notice li:hover {background-color: #f1f1f1}
.notice li img{width: 20px; height: 20px;margin-right:5px;vertical-align:middle; border-radius: 4px;}
.notice li i {display: block;position: absolute;top:10px;right:0px;width:16px;height:16px;line-height:16px;font-size:12px;text-align:center;color:#fff;background: red;border-radius: 100%;}

.chat_list {background: #fff;border: 1px solid #eee;border-radius: 10px;padding:10px;margin:10px;}
.chat_list li {position: relative;border-bottom:1px solid #eee;color:#333;padding:15px 0px 15px 0px}
.chat_list a {display:block;margin-bottom: 1px; cursor: pointer;font-size: 12px;border-radius: 2px;margin-right:40px;}
.chat_list li:hover {background-color: #f1f1f1}
.chat_list img{display: block;position: absolute;width: 32px; height: 32px;left:8px;top:17px; border-radius: 4px;}
/*
.chat_list li i {display: block;position: absolute;bottom:10px;right:10px;width:16px;height:16px;line-height:16px;font-size:12px;text-align:center;color:#fff;background: red;border-radius: 100%;}
*/
.chat_list p {display: block;position: relative;margin:0px 0px 0px 50px;}
.chat_list span.text {display: block;height:14px;padding-right:20px;height: 20px;margin-top:5px;overflow: hidden;color: #ababab;white-space: nowrap;text-overflow: ellipsis;}
.chat_list span.text img{left: 0px;width:18px;height:18px;}
.chat_list span.time {color: #ababab;display: block;position: absolute;right:10px;top:0px;}
.chat_list span.delm {text-align: center;color: #ababab;display: block;z-index:999;right:5px;top:10px;cursor: pointer;position: absolute;width:30px;height:25px;}
.chat_list span.delm i {display: block;line-height:16px;font-size:16px;text-align:center;color:#ff8a8a;}
.chat_list span.delm i:hover {color:#1a73e8}
.chat_list span.topm {text-align: center;color: #ababab;display: block;z-index:999;right:5px;bottom:5px;cursor: pointer;position: absolute;width:30px;height:25px;}
.chat_list span.topm i {display: block;line-height:16px;font-size:16px;text-align:center;color:#ff8a8a;}
.chat_list span.topm i:hover {color:#1a73e8}
.chat_list .top1 {background-color:#f7f7f7;border-bottom:1px solid #ffffff}


.chat_list span.num {display: block;position: absolute;top:5px;left:30px;width:16px;height:16px;line-height:16px;font-size:12px;text-align:center;color:#fff;background: red;border-radius: 100%;}

.banner {position: relative;padding:20px 10px 0px 10px;}
.banner img{width:100%;border-radius: 5px;}
.banner h1 {position: absolute;width:100%;top:50px;font-size:48px;text-align:center;color:#333}

.search {display:block;position: relative;font-size:0;vertical-align: top;margin:10px 0px;}
.search .key {background:#fff;height:45px;outline:none;padding-left:40px;width:100%;border-radius: 4px 0px 0px 4px ;}
.search .but {position: absolute;height:45px;width:60px;right:0px;background:#5c9bf3;color:#fff;border:1px solid #5c9bf3;padding:14px;border-radius: 0px 4px 4px 0px ;}
.search i {position: absolute;cursor: pointer;width:20px;margin:12px 0px 0px 10px;}
.search .icon {font-size:20px;color: #666;}

.dropbtn {position: relative; background-color: #fff;color: #e9aa1e;padding: 10px;border: none;cursor: pointer;font-size:16px;border-radius: 5px;}
.dropbtn i,.dropdown-content a i {display: block;position: absolute;top:0px;right:0px;width:16px;height:16px;line-height:16px;font-size:12px;text-align:center;color:#fff;background: red;border-radius: 100%;}
.dropdown {position: relative; display: inline-block;}
.dropdown-content {display: none;position: absolute;z-index:1000;width:110px;background-color: #f9f9f9;right:0px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content a {position: relative;color: black;font-size:14px;padding: 10px 20px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropbtn {background-color: #eee;}

#container {margin:0 auto;min-height:100vh}

#topic {position: relative;}
h2 {margin-top:20px;text-align:center;color:#B15BFF}
.lxfs {color: #e9aa1e;cursor: pointer;}
form .tips{display:none;border-left: 5px solid #B15BFF;padding:5px 10px;margin:10px 0px;color:#BB5E00}

.top {position: fixed;right: 10px;bottom: 80px;z-index: 99990;display: none;border-radius:2px}
.top li {width: 50px; padding: 8px 0px; margin-bottom: 1px; text-align: center; cursor: pointer;font-size: 12px;background: #323436;color: #fff; border-radius: 2px;opacity: .8;}
.top li i {display: block;width: 50px;height: 22px;font-size: 20px;}

.bottom {position:fixed;bottom:0;z-index:99990;width:100%;background: #fff;box-shadow: 0 0 5px 0 rgb(64 60 67 / 16%);}
.bottom ul{padding:10px;font-size:0;}
.bottom ul li{display: inline-block;position: relative;text-align:center;font-size:14px;width:16.6%;}
.bottom ul li a{color:#666;}
.bottom ul li span {display: block;position: absolute;top:0px;right:10px;width:16px;height:16px;line-height:16px;font-size:12px;text-align:center;color:#fff;background: red;border-radius: 100%;}
.bottom ul li i.icon{display: block;font-size:20px;}

.button {padding: 10px 16px;height: 20px;line-height: 20px; position: relative;user-select:none;cursor: pointer;color: #fff;background-color: #5c9bf3;border: 1px solid #5c9bf3;border-radius: 4px;overflow: hidden;display: inline-block;}
.button input {position:absolute;left:0;top:0}

.box {position: relative;padding:20px;padding-bottom:10px;margin:20px 8px;box-sizing:border-box;background: #fff;border:1px solid #eee;border-radius: 4px;}
.box .box {border-radius: 5px;margin:0px 0px 20px 0px;box-shadow: 0 0px 0px 0 rgba(68,74,102,.1)!important;}
.box h3 {margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #f5f5f5;text-align: center;color: #B15BFF;}

.box .image {font-size:0;}
.box .image:after {content: "";display: inline-block;width: 100%;}
.box .image ul {display: inline-block;position: relative;vertical-align: top;overflow: hidden;}
.box .image ul.img {width:100%;overflow: visible;}
.box .image ul.img1 {width:100%;}
.box .image ul.img2 {width:50%;}
.box .image ul.img3 {width:33.33%;}
.box .image li {margin:2px;position: relative;height:0;padding-bottom: 100%;}
.box .image img {position: absolute;border-radius: 3px;max-width:100%;min-height:100%;cursor: pointer;}
.box .image ul.img li{height:auto;padding-bottom: 0;}
.box .image ul.img li img{position: relative;}

.box .files p {}

.box .video {text-align:center;position: relative;}
.box .video li{position: relative;background: #000;margin-bottom:20px;}
.box .video li img{max-height:450px;max-width:100%;}

.box .video li .play{position:absolute;cursor: pointer;left:50%;top:50%;bottom:30px;width:96px;margin-left:-48px;margin-top:-48px;opacity:0.3;}
.box .video li .play:hover{opacity:0.5;}

.box .video li .player{position:absolute;cursor: pointer;left:50%;top:50%;bottom:30px;width:96px;margin-left:-48px;margin-top:-48px;opacity:0.3;}
.box .video li .player:hover{opacity:0.5;}

.box .video li .playno{position:absolute;cursor: pointer;left:50%;top:50%;bottom:30px;width:96px;margin-left:-48px;margin-top:-48px;opacity:0.3;}
.box .video li .playno:hover{opacity:0.5;}

.box video.v {max-width:100%;}
.box video.v1 {max-width:100%;}
.box video.v2 {width:49.3%;}
.box video.v3 {width:32.2%;margin-bottom:3px;}
.box video.v {max-width:100%;}
.box .desc {width:100%;color:#333;font-size:18px;line-height:1.5;margin-bottom: 20px;white-space:pre-wrap;word-wrap:break-word;font-family: Arial, sans-serif;}
.box .desc code{display: block;font-size:12px;padding: 10px;background-color: #f4f4f4;border: 1px solid #ccc;border-radius: 4px;font-family: monospace;}
.box mark{  display: block; /* 从 inline-block 改为 block */
  width: fit-content; /* 自动适配宽度 */
  margin: 20px auto; /* 上边距20px，水平居中 */
  background: #f5f5f5;
  text-align: center;
  font-size: 12px;
  color: #2d72d2;
  padding: 10px 20px;
  border-radius: 4px;}
.box .user {font-size:16px;}
.box .user .name {color: #999999;}
.box .user .name a{color: #333;}
.box .user .name i{font-size:14px;}
.box .user .date {}
.box .user .follow {cursor: pointer;position: absolute;top:0px;right:0px;}
.box .tool {user-select: none;}
.box .tool li {display: inline-block;cursor: pointer;color:#333;padding:5px;margin:5px;opacity: 0.8;}
.box .tool li:hover {background: #f5f5f5;border-radius: 10px;}
.box .tool span {position: relative;display: inline-block;height:15px;}
li.reply,li.link,li.del_likes {float:right}
.box .date {font-size:12px;}
.box .files span {color:#666}
.box_reply {position: relative;margin:0px 8px;border:1px solid #eee;border-bottom:none;}
.box_reply .box {box-shadow: none;margin:0px;border:none;border-bottom:1px solid #ddd;border-top:0px;border-radius: 0px;box-shadow: 0 0px 0px 0 rgba(68,74,102,.1)!important;}
.box .vpn{position: relative;font-size: 12px;color: #ccc;text-align: right;margin: 20px 0px;}
.box .vpn span{position:absolute;left:0;padding-right:20px;}
.box .vpn i{color:#7d7d7d}

.box .other {font-size: 12px;background: #f5f5f5;word-break:break-all;word-wrap:break-word;padding:10px;}

.signrw {
	color: #fff;
    background: #e9aa1e;
    padding: 0px 10px;
    font-size: 12px;
    border-radius: 4px;
	font-weight: normal;
}

.tooltip-container {
	position: absolute;
    right: -15px;
    bottom: 7px;
}

.tooltip {
  position: absolute;
  bottom: 30px; /* 增加一些空间让尾巴显现 */
  right: 10px;
  background-color: #555; /* 气泡背景颜色 */
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  min-width: 120px; /* 设置最小宽度，确保尾巴不被挤压 */
}

/* 小尾巴 */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -20px; /* 调整尾巴与气泡之间的距离 */
  right: 20px;  /* 使尾巴偏向右下角 */
  border-width: 10px;
  border-style: solid;
  border-color: #555 transparent transparent transparent; /* 确保尾巴颜色和气泡一致 */
}



.reply_mini {color:#666}
.reply_mini ul {border-bottom:1px dashed #eee;margin-bottom:10px;}
.reply_mini ul p{word-break:break-all;word-wrap:break-word;padding-left:26px;color: #333;}
.reply_mini ul p a{color: #333;}
.reply_mini .face {width:24px;height:24px;border-radius: 100%;vertical-align: middle;}
.reply_mini .time {font-size:12px;color:#999;float:right;}

.picture {position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); width: 100%; height:100%;z-index: 99999;	text-align: center;}
.picture img{box-shadow: -2px 0px 20px #000;border:5px solid #fff;max-width:90%;max-height:90%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.picture {animation: 0.5s picture1 0s infinite; animation-iteration-count:1;animation-fill-mode: forwards;}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
	backdrop-filter: blur(4px); /* 模糊效果 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none; 
}
@keyframes picture1{
	0%{opacity:0;}
	100%{opacity:1;}
}

.reply {position: relative;}
.quote {position: absolute;top: -40px;right: 0;width:70px;height:70px;z-index:99;color:#ccc}
.quote svg{fill: #00E3E3}

.user {position: relative;height:55px;color:#666}
.user .face {position: absolute;width: 52px;height: 48px;z-index: 999;}
.user .face img{width: 48px;height: 48px;border-radius: 100%;}
.user .intro {position: relative;padding-left:60px;padding-top:5px;line-height:1.5}
.user .intro span{display: inline-block;}
.user .intro span.details{position: absolute;right:0;}
.user .name {margin-right:10px;}
.user .date {color:#666}
.user .city {font-size:14px;position: absolute;left: 60px;top: 28px;cursor: pointer;}
.user .del, .user .man{position: absolute;right:0px;top:0px;cursor: pointer;z-index:999}
.user .del i,.user .man i {font-size:20px;}

.vote {border:1px solid #ddd;border-radius: 5px;padding:10px;}
.vote li {padding:10px 0;border-bottom:1px solid #eee;font-weight: bold;}
.vote input {width:20px;margin-bottom:7px;}
.vote .button {margin-top:10px;}
.vote li i {display:block;height:12px;background: #FFA042;color:#fff;font-size:10px;border-radius: 3px;margin-top:5px;text-align:right;}

#edit {cursor: pointer;user-select: none;}
.edit_user {width:100%;z-index:999;background: #fff;}
.edit_user .checkbox {width:18px;height:18px;}
.edit_user label{margin:10px 3px;}


.user_home {margin:20px;text-align:center;position: relative;
    padding: 20px;
    margin: 20px 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
	}
.user_home .face {margin:0px auto;display: block;width: 200px;height: 200px;border-radius: 100%;}
.user_home .name {margin:10px;font-size:24px;color:#e9aa1e}
.user_home .intro {margin:10px;font-size:14px;color:#666}
.user_home span {display: inline-block;}
.user_home .division {margin:0px 10px}
.user_home .time {margin:20px 0px;}
.user_home .fans span{margin:5px;padding:10px 15px;background:#f5f5f5;color:#333;border-radius: 10px;}
.user_home .fans span i{display: block;text-align:center;margin-top:5px;}
.user_home .follow ,.user_home .state {cursor: pointer;}
.user_home .edit_face {position: absolute;padding: 10px;right: 10px;top: 10px;cursor: pointer;}
.user_home .edit_face i{font-size: 22px;cursor: pointer;}

.user_list {text-align: justify;text-justify: inter-word;}
.user_list::after {content: "";display: inline-block;width: 100%;}
.user_list a{color: #333;}
.user_list .users {display: inline-block;position: relative;text-align: center;vertical-align: top;margin-bottom:20px;width:70px;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.user_list .users .face {display: inline-block;position: relative;width:52px;height:48px;margin-bottom:5px;}
.user_list .users .face img{width: 48px;height: 48px;border-radius: 100%;}
.user_list .users .vip{position: absolute; right: 0;top: 0;}
.user_list .users i{color: #999999;font-size:12px;line-height:24px}
.user_list .users .remove{position: absolute; right: 0;top: 0;cursor: pointer;}

#form_post.hide {display:none;}

hr {display:block;border:none;border-top:1px solid #f5f5f5;margin:10px 0px;height:1px;}

#form_tool {text-align: justify;position: relative;}
#form_tool span{cursor: pointer;}



.upload {position: absolute; width: 100%; height: 100%; right: 0;top: 0;opacity: 0; filter: alpha(opacity=0);cursor: pointer;}
#form_post td {font-size:16px;cursor: pointer;border-radius: 5px;}
#form_post td:hover {background: #f5f5f5;}
#editor_file {position: relative;font-size: 0;}
#editor_file li {position: relative;display: inline-block;width:30%;height:120px;margin:5px;}
#editor_file li img {width:100%;height:120px;}
#editor_file li video {width:100%;height:120px;background:#000}
#editor_file li strong {background:#000;display: inline-block;font-size:100%;height:120px;width:100%;}
#editor_file li span {position: absolute;background-color: rgba(0,0,0,0.6);width: 100%;height: 100%;right: 0;top: 0;font-size: 18px;text-align:center;color:#fff;line-height:100px;text-shadow: 0 1px 0 #000;}
#editor_file li i,#editor_vote li i {position: absolute;top: 0;right: 0;font-size:18px;font-style: normal;cursor: pointer;}
.editor {font-size:14px;min-height:150px;}
#editor_vote {display:none}
#editor_vote li {position: relative;}
#editor_vote li i {top: 5px;right:5px;}
#editor_vote.show{display:block;}

#editor_other {display:none}
#editor_other.show{display:block;}

#editor_emoji {display:none;user-select: none;text-align: justify;margin-bottom:20px;}
#editor_emoji span{display: inline-block;user-select: none;width:27px;height:27px;font-size:20px;border:1px solid #fff}
#editor_emoji span:hover{border:1px solid #666}
#editor_emoji.show{display:block;}
#verify {display:none}

#editor_down {display:none1;user-select: none;text-align: justify;margin-bottom:20px;}
#editor_down.show{display:block;}


#userSuggestions {
	display: none;
    position: absolute;
    z-index: 1000;
    width:180px;
    background-color: #fff;
	padding:5px;
    left: 10px;
	font-size:14px;
    max-height: 200px;       /* 可视窗口一半高度 */
    overflow-y: auto;       /* 内容超出时显示滚动条 */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#userSuggestions li{
	margin-top:0px;
	padding: 5px 0px;
}
#userSuggestions li img{
    top: 7px;
}

#userSuggestions span.text {
    margin-top: 0px;
	font-size:12px;
}

.checkb {
margin-top:20px;text-align:right;
}
.checkbox {
display: inline-block;width:25px;margin-top:8px;
}

.post_button {text-align: justify;padding:5px;}
.post_button:after {content: "";display: inline-block;width: 100%;}
.post_button span{position: relative;display: inline-block;text-align: center;user-select: none;margin:-5px;padding:10px;background-color: #f5f5f5; color: #666;border: 1px solid #f5f5f5;border-radius: 5px;}
.post_button span:hover{border:1px solid #ccc}
.post_button span.post_submit {border: 1px solid #5c9bf3;background-color: #5c9bf3;color:#fff}
.post_button span i {display:block;}

.footer {background:#fff;color:#999;padding:20px;font-size:12px;box-shadow: 0 10px 30px 0 rgba(68,74,102,.1)!important;text-align:center}

.pages {margin:20px 0px;text-align:center}
.pages a{background: #fff;color:#666;height:30px;line-height:30px;border-radius: 10px;display: inline-block;border:1px solid #e5e5e7;padding:0px 10px;margin:2px;}
.pages a.active{background: #ededef;}

.status {
  position: absolute;top: 0px;right: 0px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-l1 { background-color: rgba(0, 255, 0, 1); animation: blink 1s infinite; }
.status-l2 { background-color: rgba(0, 255, 0, 0.8); }
.status-l3 { background-color: rgba(0, 255, 0, 0.5); }
.status-l4 { background-color: rgba(0, 255, 0, 0.2); }
.status-l5 { background-color: rgba(0, 255, 0, 0); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.safety {
	padding: 10px;
    background-color: #ff0;
    width: 360px;
    margin: 5px auto;
	text-align:center;
	border: 1px solid #eee;
}

#loading {display:none;position:absolute;width:100%;height:100%;border-radius: 10px;line-height:30px;padding-top:20px;left:0px;top:0px;z-index:99999;text-shadow: 0 1px 0 #fff;background-color:rgba(0,0,0,0.1);text-align:center;box-sizing:border-box;}
#loading.pull {display:block;}

.loading {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  animation: load 1.1s infinite linear;
}
.loading,.loading:after {border-radius: 50%;width: 100%;height: 100%;}

.miniload {
  font-size: 10px;
  text-indent: -9999em;
  border: 5px solid rgba(187,187,187, 0.5);
  border-left: 5px solid #bbb;
  animation: load 1.1s infinite linear;
}

.loading,.loading:after  {border-radius: 50%;width: 30px;height: 30px;}
.miniload,.miniload:after {border-radius: 50%;width: 10px;height: 10px;}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.msg_tips {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-124px;
	z-index: 19891045;
	text-align: center;
	background-color: #666;
	box-shadow: 0 10px 30px 0 rgba(68,74,102,.5)!important;
	text-align:center;
	color: #fff;
	border-radius: 5px;
	padding: 12px 24px;
	text-align: center;
	line-height: 24px;
	font-size: 14px;
	min-width: 200px;
	transition: all .1s ease-in;
}

.msg_tips{animation: 3s opacity 0s infinite; animation-iteration-count:1;animation-fill-mode: forwards;}

@keyframes opacity{
	0%{opacity:0;transform: translateY(0);}
	50%{opacity:1;transform: translateY(-30px);}
	75%{opacity:1;transform: translateY(-30px);}
	100%{opacity:0;transform: translateY(-60px);}
}

.newmsg {position: fixed;display:none;padding:5px;font-size:12px;left: 10px;bottom: 80px;z-index:99999;border:1px solid #ccc;background:#fff;border-radius: 4px;box-shadow: 0 0 5px 0 rgba(64, 60, 67, .16);border-radius: 4px;}
.newmsg a {display:block;margin:10px 5px;padding-right:20px;}
.newmsg i {position: absolute;width:16px;height:16px;line-height:16px;text-align:center;right:5px;border-radius:100%;background:red;color:#fff;}
.newmsg img {height:20px;width:20px;margin-right:10px;border-radius: 100%;vertical-align: middle;}
.newmsg div {text-align: center;background:#eee;color:#333;padding:5px;cursor: pointer;border-radius: 4px;}


    /* 遮罩层 */
    #mydlg-mask {
      display: none;
      position: fixed;
      z-index: 9998;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
    }

    /* 弹出框 */
    #new-popup {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 50%; left: 50%;
      width: 300px;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    #new-popup .mydlg-title {
      padding: 12px;
      font-weight: bold;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
      text-align: center;
	  color: #666;
	  border-radius: 4px;
    }

    #new-popup .mydlg-content {
      padding: 15px;
    }



    #new-popup .mydlg-buttons {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border-top: 1px solid #eee;
    }

    #new-popup .mydlg-buttons button {
      width: 48%;
      padding: 10px;
	  font-size:14px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #new-popup .mydlg-confirm {
		background: #64a2f7;
      color: white;
    }

    #new-popup .mydlg-cancel {
      background: #64a2f7;
      color: white;
    }

@media (min-width:800px) {
	#container{width:660px;}
	.box .img img.img1 {width:100%;}
	.box .img img.img2 {width:49.5%;}
	.box .img img.img3 {width:32.7%;margin-bottom:3px;}
	.box .user {font-size:16px;}
	.user .intro {padding-top:0px;line-height:2}
	.user  span.edit{top:0px}
	.bar ul {width:640px;margin:0 auto;}
	.box video.v {max-height:600px;display:block;margin:0 auto}
	.post_button span{padding:10px 30px;font-size:16px}
	.post_button span i {display: inline;}
}

@media (max-width: 360px) {
	.hot a {
		display: inline-block;
		margin: 0px 6px;
		color: #666;
	}
}

.hnotice {padding:8px;padding: 20px;box-sizing: border-box;background: #fff;border: 1px solid #eee;border-radius: 4px;margin: 20px 8px;}

body.dark-mode {
  background-color: #121212;
  color: #818181;
}

body.dark-mode a {
  color: #a1a1a1;
}
body.dark-mode a:hover {
  color: #1a73e8;
}

body.dark-mode .bar,
body.dark-mode .box,
body.dark-mode .chat_list,
body.dark-mode .notice,
body.dark-mode .dropdown-content,
body.dark-mode .bottom,
body.dark-mode .user_home,
body.dark-mode .footer,
body.dark-mode .magnet ul {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}

body.dark-mode .box .desc code,
body.dark-mode .post_button span {
  background-color: #2a2a2a;
  border-color: #444;
  color: #ccc;
}

body.dark-mode .button {
  background-color: #333;
  border-color: #444;
}

body.dark-mode input,
body.dark-mode textarea {
  background-color: #2a2a2a;
  color: #eee;
  border-color: #555;
}


body.dark-mode hr {border-top: 1px solid #2b2b2b;}

body.dark-mode .box .user .name a {color: #adadad;}

body.dark-mode .box .desc {color: #afafaf;}

body.dark-mode .box_reply {border: 1px solid #323232;}

body.dark-mode .box .tool li {color: #afafaf;}

body.dark-mode .box .vpn {color: #535353;}

body.dark-mode .pages a {background: #1e1e1e;border: 1px solid #1e1e1e;}
body.dark-mode .pages a.active {background: #c0981f;}

body.dark-mode .hnotice {background: #1e1e1e;border: 1px solid #333333;}

body.dark-mode .user_home .fans span , body.dark-mode .ubutton span{
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .box mark {
  background: #2a2a2a;
  color: #90caf9; /* 浅蓝色，更显眼 */
}

body.dark-mode .dropbtn {
  background-color: #2a2a2a;
  color: #f1c75b; /* 保持金色调但更适合深色背景 */
}

body.dark-mode .edit_user { background: none;
}

body.dark-mode .chat_list li {border-bottom: 1px solid #2b2b2b}
body.dark-mode .chat_list li:hover {background-color: #121212}

body.dark-mode .vote , body.dark-mode .vote li{border: 1px solid #2b2b2b;}

body.dark-mode .reply_mini ul {border-bottom: 1px dashed #2b2b2b;}
body.dark-mode .reply_mini ul p a {color: #afafaa;}


	
body.dark-mode .search .key {
background-color: #2a2a2a;
    color: #eee;
    border-color: #555;
}

body.dark-mode #editor_emoji span {border: 1px solid #414141;}

body.dark-mode .box h3 {border-bottom: 1px solid #2b2b2b;}

body.dark-mode .newmsg {
  background: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}


body.dark-mode .chat_list .top1 {
    background-color: #373737;
}

body.dark-mode .search .but  {
	background-color: #1e1e1e;
    border-color: #555555;
    color: #ccc;
}