*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

:root{
	--primary:#2f6fed;
	--primary-dark:#1f57c4;
	--danger:#e5484d;
	--ink:#1a1f2b;
	--sub:#5b6472;
	--line:#e6e8ec;
	--bg:#ffffff;
	--soft:#f6f8fb;
	--radius:.25rem;
	--border:#ccc;
	--border-red:#f00;
	--hover-bg:#eaf1ff;
}

html,body{
	width:100%;
	height:auto;
	font-size:125%;
	-webkit-tap-highlight-color:transparent;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	scroll-behavior:smooth;
	text-rendering:optimizeLegibility;
	transform:none!important;
}

body{
	font-family:"WenQuanYi Micro Hei","PingFang SC","Microsoft YaHei",sans-serif;
	color:var(--ink);
	background:var(--bg);
	font-size:.6rem;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}

a{
	color:inherit;
	text-decoration:none;
}

button{
	font-family:inherit;
	cursor:pointer;
	border:none;
	background:none;
	white-space:nowrap;
}

input,textarea{
	font-family:inherit;
	font-size:.75rem;
}

/* 顶部导航 */
.topbar{
	position:sticky;
	top:0;
	z-index:50;
	width:100%;
	background:rgba(255,255,255,.9);
	backdrop-filter:blur(.25rem);
	border-bottom:.025rem solid var(--line);
}

.topbar-inner{
	margin:0 auto;
	padding:0 1rem;
	height:3.8rem;
	display:flex;
	align-items:center;
	gap:1.4rem;
}

.topbar-inner>a{
	margin:0;
	display:block;
	width:min-content;
	height:100%;
}

.topbar-inner .logo{
	padding:.15rem 0;
	width:min-content;
	min-width:3rem;
	height:100%;
	flex-shrink:0;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	align-content:center;
}

.topbar-inner .img-logo{
	padding:0 .25rem 0 0;
	width:auto;
	min-width:2.3rem;
	height:2.3rem;
}

.topbar-inner .img-text{
	padding:0 .25rem;
	width:auto;
	white-space:nowrap;
}

.topbar-inner .img-text>.mt{
	font-size:.85rem;
	font-weight:600;
	letter-spacing:.05rem;
}

.topbar-inner .img-text>.st{
	font-size:.7rem;
}

.nav{
	display:flex;
	gap:.35rem;
	flex-wrap:nowrap;
	overflow-x:auto;
}

.nav a{
	white-space:nowrap;
	padding:.4rem .6rem;
	border-radius:var(--radius);
	color:var(--sub);
	font-size:.7rem;
	font-weight:600;
	transition:.15s;
}

.nav a:hover{
	color:var(--primary);
	background:var(--hover-bg);
}

.nav a.active{
	color:var(--primary);
	background:var(--hover-bg);
}

.top-actions{
	margin-left:auto;
	display:flex;
	gap:.5rem;
	align-items:center;
}

@media(max-width:45rem){
	.nav a:nth-child(n+5){
		display:none;
	}

	.topbar-inner{
		padding:0 .8rem;
		gap:.7rem;
	}
}

/* 按钮 */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.3rem .6rem;
	border-radius:var(--radius);
	font-size:.7rem;
	font-weight:700;
	transition:.15s;
	border:.05rem solid transparent;
}

.btn-primary{
	background:var(--primary);
	color:#fff;
}

.btn-primary:hover{
	background:var(--primary-dark);
}

.btn-outline{
	background:#fff;
	color:var(--primary);
	border-color:var(--primary);
}

.btn-outline:hover{
	background:var(--hover-bg);
}

.btn-ghost{
	color:var(--sub);
}

.btn-ghost:hover{
	color:var(--primary);
	background:var(--hover-bg);
}

.btn-danger{
	background:var(--danger);
	color:#fff;
}

.btn-danger:hover{
	background:#c8373d;
}

.btn-block{
	width:100%;
}

/* 布局 */
.container{
	margin:0 auto;
	padding:1.6rem 1rem;
	width:100%;
}

.page-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:.8rem;
	margin-bottom:1.3rem;
	flex-wrap:wrap;
}

.page-head h1{
	font-size:1.3rem;
	font-weight:800;
}

.page-head p{
	color:var(--sub);
	font-size:.7rem;
	margin-top:.2rem;
}

.section-title{
	font-size:.9rem;
	font-weight:800;
	margin:1.4rem 0 .8rem;
	display:flex;
	align-items:center;
	gap:.5rem;
}

.section-title::before{
	content:"";
	width:.25rem;
	height:1rem;
	background:var(--primary);
	border-radius:.15rem;
}

/* 卡片网格 */
.grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
}

@media(max-width:49rem){
	.grid{
		grid-template-columns:repeat(2,1fr);
	}
}

@media(max-width:32rem){
	.grid{
		grid-template-columns:1fr;
	}
	.container{
		padding:1rem .8rem;
	}
}

.card{
	background:#fff;
	border:.05rem solid var(--line);
	border-radius:var(--radius);
	padding:1rem;
	transition:.18s;
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.card:hover{
	border-color:#c7d6f7;
	box-shadow:0 .3rem 1rem rgba(47,111,237,.08);
	transform:translateY(-.1rem);
}

.card .tag{
	font-size:.6rem;
	font-weight:700;
	color:var(--primary);
	background:var(--hover-bg);
	padding:.15rem .45rem;
	border-radius:1rem;
	align-self:flex-start;
}

.card h3{
	font-size:.8rem;
	font-weight:800;
	line-height:1.45;
}

.card p{
	font-size:.65rem;
	color:var(--sub);
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.card .meta{
	font-size:.6rem;
	color:#9aa2b0;
	display:flex;
	gap:.6rem;
	margin-top:auto;
	padding-top:.4rem;
	border-top:.05rem dashed var(--line);
}

/* 帖子详情 */
.selection-box{
	margin:0 auto;
	padding:1.5rem 1rem;
	line-height:1.5;
	font-size:.7rem;
}

.selection-box .back{
	color:var(--sub);
	font-size:.65rem;
	margin-bottom:.7rem;
	display:inline-block;
}

.selection-box .back:hover{
	color:var(--primary);
}

.selection-box h1{
	font-size:1.5rem;
	font-weight:900;
	line-height:1.35;
	margin-bottom:.6rem;
}

.selection-box .by{
	display:flex;
	align-items:center;
	gap:.6rem;
	color:var(--sub);
	font-size:.65rem;
	margin-bottom:1.2rem;
	padding-bottom:.9rem;
	border-bottom:.05rem solid var(--line);
}

.avatar{
	width:2rem;
	height:2rem;
	border-radius:50%;
	background:linear-gradient(135deg,var(--primary),#8bb4ff);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
}

.selection-box .body p{
	margin:.7rem 0;
	text-align:justify;
}

.selection-box pre{
	background:var(--soft);
	border:.05rem solid var(--line);
	padding:.5rem;
	overflow:auto;
	margin:.9rem 0;
}

.tip-select{
	background:#fff8e6;
	border:.05rem dashed #f0c040;
	color:#8a6300;
	padding:.6rem .8rem;
	margin:1rem 0;
}

/**
 * 评论区
 */
.comments{
	margin-top:1.6rem;
	border-top:.025rem solid var(--border);
	padding-top:1.2rem;
}

.comments h3{
	font-size:.8rem;
	margin-bottom:.8rem;
}

.comment-form .comment-input{
	width:100%;
	min-height:4rem;
	padding:.5rem;
	border:.025rem solid var(--border);
	border-radius:var(--radius);
	font:inherit;
	resize:vertical;
}

.comment-form .comment-input.fail{
	border:.025rem solid var(--border-red);
}

.comment-form .comment-input-tip{
	width:100%;
	padding:0 0 .25rem 0;
	visibility:hidden;
	font-size:.6rem;
	color:var(--border-red);
}

.comment-form .comment-input-tip.show{
	visibility:visible;
}

.form-actions{
	text-align:right;
	margin-top:.4rem;
}

.comment-list{
	margin-top:1rem;
}

.comment-item{
	padding:.6rem 0;
	border-bottom:.025rem solid #f0f0f0;
}

.comment-item .meta{
	font-size:.6rem;
	color:#666;
	margin-bottom:.3rem;
}

.comment-item .text{
	font-size:.7rem;
	line-height:1.5;
}

.comment-item .reply-btn{
	margin-top:.3rem;
	font-size:.6rem;
	color:var(--primary);
	background:none;
	border:none;
	cursor:pointer;
}

.comment-item.reply{
	margin-left:1.2rem;
	padding-left:.6rem;
	border-left:.1rem solid var(--hover-bg);
}

/**
 * toast提示
 */
.toast{
	position:fixed;
	left:50%;
	bottom:6rem;
	width:auto;
	max-width:15rem;
	height:auto;
	transform:translateX(-50%) translateY(1rem);
	background:rgba(0,0,0,.8);
	color:#fff;
	font-size:.6rem;
	padding:.5rem 1rem;
	border-radius:var(--radius);
	opacity:0;
	pointer-events:none;
	white-space:pre;
	transition:opacity .2s ease, transform .2s ease;
	z-index:9999;
	overflow:hidden;
}

.toast.show{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

.toast.common{
	background:rgba(0,0,0,1);
	color:#fff;
}

.toast.success{
	background:rgba(0,138,0,1);
	color:#fff;
}

.toast.fail{
	background:rgba(255,51,0,1);
	color:#fff;
}

/* 底部弹出菜单 */
.popmenu{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	background:#fff;
	box-shadow:0 -.5rem 2rem rgba(0,0,0,.16);
	transform:translateY(100%);
	transition:transform .28s ease;
	z-index:200;
	padding:1rem;
	user-select:none;
}

.popmenu.open{
	transform:translateY(0);
}

.popmenu .grab{
	width:2.1rem;
	height:.25rem;
	background:#e0e3e8;
	border-radius:.15rem;
	margin:.2rem auto .7rem;
}

.popmenu .label{
	text-align:center;
	font-size:.65rem;
	color:var(--sub);
	margin-bottom:.8rem;
}

.popmenu .row{
	display:flex;
	justify-content:center;
	gap:.9rem;
	flex-wrap:wrap;
}

.popmenu .item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.35rem;
	background:var(--soft);
	border-radius:var(--radius);
	padding:.8rem 1.1rem;
	min-width:4.8rem;
	transition:.15s;
	color:var(--ink);
	font-size:.65rem;
	font-weight:700;
	border:none;
}

.popmenu .item:hover{
	background:var(--hover-bg);
	color:var(--primary);
}

.popmenu .item .ic{
	width:1.5rem;
	height:1.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:#fff;
	font-size:.85rem;
}

.popmenu .item.report{
	background:#fdecec;
	color:var(--danger);
}

.popmenu .item.report:hover{
	background:#fbd8d9;
}

/* 表单页（登录/注册/找回） */
.auth-wrap{
	max-width:22rem;
	margin:3rem auto;
	padding:0 1rem;
}

.auth-card{
	background:#fff;
	border:.05rem solid var(--line);
	border-radius:var(--radius);
	padding:1.7rem 1.6rem;
	box-shadow:0 .4rem 1.5rem rgba(47,111,237,.06);
}

.auth-card h2{
	font-size:1.1rem;
	font-weight:900;
	margin-bottom:.3rem;
}

.auth-card .sub{
	color:var(--sub);
	font-size:.65rem;
	margin-bottom:1.1rem;
}

.field{
	margin-bottom:.7rem;
}

.field label{
	display:block;
	font-size:.65rem;
	font-weight:700;
	margin-bottom:.3rem;
	color:var(--sub);
}

.field input{
	width:100%;
	padding:.55rem .65rem;
	border:.05rem solid var(--line);
	border-radius:var(--radius);
	background:#fff;
	transition:.15s;
}

.field input:focus{
	outline:none;
	border-color:var(--primary);
	box-shadow:0 0 0 .15rem var(--hover-bg);
}

.auth-card .extra{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:.65rem;
	margin:.3rem 0 .9rem;
}

.auth-card .extra a{
	color:var(--primary);
	font-weight:700;
}

.auth-card .switch{
	text-align:center;
	font-size:.65rem;
	color:var(--sub);
	margin-top:.9rem;
}

.auth-card .switch a{
	color:var(--primary);
	font-weight:800;
	margin-left:.2rem;
}

.tabs{
	display:flex;
	gap:.4rem;
	margin-bottom:1.1rem;
	background:var(--soft);
	padding:.25rem;
	border-radius:var(--radius);
}

.tabs button{
	flex:1;
	padding:.45rem;
	border-radius:var(--radius);
	font-size:.7rem;
	font-weight:700;
	color:var(--sub);
	transition:.15s;
}

.tabs button.on{
	background:#fff;
	color:var(--primary);
	box-shadow:0 .1rem .4rem rgba(0,0,0,.06);
}

/* 页脚 */
.footer{
	margin:2rem auto 0 auto;
	padding:2rem 1rem;
	width:100%;
	height:auto;
	background:var(--soft);
	border-top:.05rem solid var(--line);
	text-align:center;
	color:var(--sub);
}

.footer p{
	padding:.15rem 0;
	line-height:1.5;
}

.footer a{
	color:var(--sub);
	margin:0 .5rem;
}

.footer a:hover{
	color:var(--primary);
}

.footer>.copyrights{
	width:100%;
	line-height:150%;
}

.footer>.copyrights>.copyrights-beian{
	padding:.5rem 0 0 0;
}

.footer>.copyrights>.copyrights-span{
	padding:.15rem 0;
	width:min-content;
	line-height:150%;
}

.footer>.copyrights>.copyrights-span:not(.last){
	margin:0 .8rem 0 0;
}

.footer>.copyrights .gongan{
	padding:0 0 0 .8rem;
	background-image:url(../images/gongan.png);
	background-position:left center;
	background-repeat:no-repeat;
	background-size:auto .7rem;
}

.dot{
	margin:0 .15rem;
	width:min-content !important;
}

.dot::before{
	content:'‧';
}