.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, 
.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, 
.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, 
.col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, 
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, 
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, 
.col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, 
.col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 10px;
    padding-left: 10px;
}







html {
	scroll-padding-top: 110px;
}

body{
	margin: 0;
	padding: 0;
	background-color:#181818;
	color: #888;
	font-family: 'JetBrains Mono', 'Menlo', 'Consolas', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", monospace;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.container-fluid{
	padding: 0;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}



img{
	padding: 0;
	margin: 0;
	line-height: 1;
	display:block;
	list-style-type: none;
}




.relative{
	position: relative;
}



button{
	border: 0;
	padding: 0;
	margin: 0;
}

a{
	color: #6b8096;
}

a:hover{
	text-decoration: none;
}

h2,h3,h4,h5,h6{
	margin: 0;
	padding: 0;
	line-height: 1;
}

h1{
	font-size: 36px;
	font-weight: 300;
	letter-spacing: 0.04em;
}

h2 {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 0.03em;
}

h3 {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.03em;
}

h4 {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

label{
	color: #999;
}


ol,ul,li{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

ol li{
	margin-left: 15px;
	list-style: auto;
	line-height: 2;
}

.navbar-dark .navbar-nav .nav-link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
}
.navbar-dark .navbar-nav .nav-link.current{
	color: white;
	font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link.current::before {
	content: '[ ';
	color: #555;
	font-weight: 400;
}
.navbar-dark .navbar-nav .nav-link.current::after {
	content: ' ]';
	color: #555;
	font-weight: 400;
}


.navbar{
	padding: 10px 20px;
}

.navbar{
	border-bottom: 2px solid #000000;
}
.navbar-brand {
	margin: 0 30px 0 0;
	padding: 5px 0;
	font-size: 13px;
	font-weight: bold;
	color: #7cc1b1;
	line-height: 30px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.navbar-brand::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.navbar-brand:hover{
	color: aqua;
}

.welcome-bar {
	font-size: 13px;
	letter-spacing: 0.03em;
}
.welcome-bar .welcome-text {
	color: #777;
}

.b {
	font-weight: bold;
}

.bline{
	border-bottom: 2px solid #1D1D1D;
}

.cross-border {
	overflow: hidden;
	border: 14px solid;
	border-image: url('/images/cross_whole.png') 14;
}

.cross-border-past{
	border-image: url('/images/cross_whole.png') 14;
}

.cross-border-highlight{
	border-image: url('/images/cross_whole_highlight.png') 14;
}

.contentBtn {
	border-radius: 15px;
	padding: 10px;
	position: relative;
	background-color: #050505;
	transition: 0.2s;
	width: 100%;
	text-align: left;
	font-size: 11px;
	color: #777;
	line-height: 1;
}

.contentBtn h3,
.contentBtn a.title{
	display: block;
	font-weight: bold;
	color: white;
	font-size: 18px;
	line-height: 1;
}

.cross-border-past .contentBtn{
	background-color: #000;
}

.cross-border-past .contentBtn h3,
.cross-border-past .contentBtn a.title{
	color: #333;
	line-height: 1;
}

.cross-border-highlight .contentBtn h3,
.cross-border-highlight .contentBtn a.title{
	color: tomato;
}

.contentBtn:hover{
	background-color: white;
}

.contentBtn:hover .white{
	color:black;
}

.contentBtn:hover h3,
.contentBtn:hover a.title{
	color: black;
}









.actor-number{
	position:absolute;
    bottom:1px;
    right:3px;
}

span.actor-number {
	font-weight: bold;
	color: #555;
	font-size: 12px;
}

.h100{
	height: 100px;
}

.h200{
	height: 200px;
}
.pd5{
	padding: 5px;
}

.pd10{
	padding: 10px;
}

.pd15{
	padding: 15px;
}

.pb8{
	padding-bottom: 8px;
}

.pb10{
	padding-bottom: 10px;
}

.pd20{
	padding: 20px;
}

.pl10{
	padding-left: 10px;
}


.pt5{
	padding-top: 5px;
}


.pt10{
	padding-top: 10px;
}


.ph10{
	padding-left:10px;
	padding-right: 10px;
}

.pv5{
	padding-top:5px;
	padding-bottom: 5px;
}



.mg-auto{
	margin: auto;
}

.mg5{
	margin:5px;
}

.mg10{
	margin:10px;
}

.mg15{
	margin:15px;
}

.mg20{
	margin:20px;
}

.mb5{
	margin-bottom: 5px;
}

.mb10{
	margin-bottom: 10px;
}


.mb20{
	margin-bottom: 20px;
}

.mb40{
	margin-bottom: 40px;
}


.mb80{
	margin-bottom: 80px;
}

.mt5{
	margin-top: 5px;
}

.mt10{
	margin-top: 10px;
}

.mt20{
	margin-top: 20px;
}

.mt40{
	margin-top: 40px;
}

.ml10{
	margin-left: 10px;
}

.ml20{
	margin-left: 10px;
}

.ml60{
	margin-left:60px;
}

.ml80{
	margin-left:80px;
}

.mr10{
	margin-right: 10px;
}

.w100p{

	width: 100%;
}

.w30{
	width: 30px;
}

.w40{
	width: 40px;
}



.w50{
	width: 50px;
}

.w80{
	width: 80px;
}

.w100 {
	width: 100px;
}

.w120{
	width: 120px;
}

.w140{
	width: 140px;
}

.w200{
	max-width: 200px;
}

.w300{
	width: 300px;
}



.w1200 {
	width: 1200px;
}

.max-h450{
	max-height: 450px;
}

.max-h600{
	max-height: 600px;
}

.max-h1000{
	max-height: 1000px;
}


.max-w100p{
	max-width: 100%;
}



.h50{
	height: 50px;
}

.h80{
	height: 80px;
}



.h100{
	height: 100px;
}

.h120{
	height: 120px;
}

.h140{
	height: 140px;
}

.h150{
	height: 150px;
}


.h100p{
	/* 让登录页主区域至少铺满视口（减去导航 + 底部大致高度），避免 footer 吊在中间 */
	min-height: calc(100vh - 180px);
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.tc {
	text-align: center;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}

.ml100{
	margin-left:100px;
}

.ml120{
	margin-left:120px;
}

.ml140{
	margin-left:140px;
}

.mr20{
	margin-right: 20px;
}



.lh-1{
	line-height: 1;
}

.lh-15{
	line-height: 1.5;
}

.lh20{
	line-height: 20px;
}

.lh25{
	line-height: 25px;
}

.lh50{
	line-height: 50px;
}

.lh100{
	line-height: 100px;
}

.lh150{
	line-height: 150px;
}

.oh{
	overflow: hidden;
}

.block{
	display: block;
}

.block-inline{
	display: inline-block;
}

.list-group-item-light{
	background-color: #212121;
}


.bg-dark{
	background-color: #101010 !important;
	position: relative;
	z-index: 10; /* 在网格背景之上 */
}

.tag {
	border: 1px solid;
	display: inline-block;
	border-color: #333;
	background-color: #111;
	color: #666;
	padding:3px 10px;
	border-radius: 12px;
	line-height: 1;
	font-size: 12px;
	font-weight: bold;
}

.tag-gray{
	
	
}

.tag-blue{
	color: #003954;
    background: #7ac8ff;
    border-color: #a7eaff;
}

.tag-purple{
	color: #3e1756;
    background: #ac8fc1;
    border-color: #fcc7ff;
}

.tag-yellow{
    color: #926d19;
    background: #ffedb9;
    border-color: #ffe7ba;
}

.tag-orange{
	color: #713900;
    background: #ffba65;
    border-color: #ffd78b;
}

.tag-green {
	color: #155724;
    background-color: #94e0a7;
    border-color: #b4ffc5;
}

.tag-tl {
	margin: 5px;
	position: absolute;
	left: 0;
	top: 0;
}


.tag-tr {
	margin: 5px;
	position: absolute;
	right: 0;
	top: 0;
}

.tag-darkgray{
	border-color: #333;
    color: #444;
    background-color: #181818;
}


.list-group-item{
	padding: 5px;
	font-size: 12px;
}



.pos-abs{
	position: absolute;
}





.center{

    position: absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%,-50%);
}




/*-------------  CONTENT MARKDOWN---------------*/

.content{
	line-height: 1.5;
}

.content.comment p{
	font-size: 13px;
}

.content a{
	color:darkseagreen;
}

.content hr{

	margin-top: 30px;
	border-top: 2px #222 solid;

}

.content h2{
	font-weight: bold;
	color: #FFF;
	padding-top: 50px;
	padding-bottom: 20px;
	border-top: 2px solid #222;
	margin-top: 50px;

}

.content.comment h2{
	font-size: 19px;
}

.content h2:first-child{
	padding-top: 0;
	margin-top:0;
	border-top: none;
}

.content h3{
	color:burlywood;
	padding-top: 30px;
	padding-bottom: 10px;

}

.content.comment h3{
	font-size: 17px;
}

.content h3:first-child,
.content h4:first-child{
	padding-top: 0;
}

.content h4{

	color:  cadetblue;
	padding-top: 15px;
	padding-bottom: 15px;

}

.content.comment h4{
	font-size: 15px;
}

.content ol {

	
	list-style-color: #222;
	list-style-type: disc;
	margin-bottom: 1rem;

}


.content ul,{

	padding-inline-start:30px;
	list-style-color: #222;
	list-style-type: disc;
	margin-bottom: 1rem;

}



.content ul ul{
	margin-bottom: 0;
}


.markdown-body ul li,
.content ul li{
	line-height: 1.8;
	list-style-type: disc;
	color:#7b7874;
}

.content.comment ul li{
	font-size: 13px;
}

.markdown-body ul ul ul li,
.markdown-body ul ul ul ul ul li,
.content ul ul ul li,
.content ul ul ul ul ul li{
	list-style-type: circle;
	color:#7b7874;
	line-height: 1.8;
}

.markdown-body ul ul li,
.markdown-body  ul ul ul ul li,
.markdown-body  ul ul ul ul ul ul li,
.content ul ul li,
.content ul ul ul ul li,
.content ul ul ul ul ul ul li{
	list-style-type: circle;
	color: #748486;
	line-height: 1.8;
}

.content blockquote{
	padding: 20px;
    border-left: 2px solid #333;
    background-color: #191919;
}

.content blockquote p:last-child {
	margin-bottom: 0;
}


.hljs, .hljs-tag, .hljs-subst{
	color: #a2a2a2;
}

/*------------ FONT COLOR -------------*/



.nowrap {
	white-space: nowrap;
}

.to-e{
	text-overflow: ellipsis;	
}

.btn{
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 3px;
}

.btn-sm{
	font-size: 0.75rem;
}

.btn-primary {
    color: #afddf3;
    background-color: #177486;
    border: 1px solid #439498;
}

.btn-primary:hover{
	color: #fff;
    background-color: #41aec3;
    border-color: #54f6ff;
}


.btn-secondary {
    color: #999;
    background-color: #33363a;
    border-color: #3f4a54;
    margin-bottom: 10px;
}



.form-control{
	background-color: #0A0A0A;
	border: 1px solid #191919;
	outline: none;
	color:#888;
	font-size: 0.9375rem;

}

.form-control:focus{
	background-color: #0E0E0E;
	border: 1px solid #232c2d;
	outline: none;
	color:#888;
	font-size: 0.9375rem;
}
.form-control::-webkit-input-placeholder {
	color: #333;
}

.custom-select{
	background-color: #0A0A0A;
	border: 1px solid #191919;
	outline: none;
	color:#888;
	font-size:  0.9375rem;
}


.white{
	color:white;
}

.gray,
a.gray{
	color:#888;
}

.graylight,
a.graylight{
	color:#CCC;
}

a.graylight:hover{
	color:#87f4ff;
}

.darkgray,
a.graydark{
	color:#333;
}

fc-yellow,
.yellow{
	color: #ffd400;
}

.greenyellow{
	color: greenyellow;
}


.darkorange{
	color: darkorange;
}

.blue{
	color: #83c0ff;
}

.blanchedalmond{
	color: blanchedalmond;
}

.crimson{
	color: crimson;
}

.mediumorchid{
	color: mediumorchid;
}


.burlywood{
	color: burlywood;
}

.aquamarine{
	color: aquamarine;
}

.skyblue{
	color: skyblue;
}







.border-darkgray{
	border:1px #222 solid;
}

.border-darkgray li{
	padding: 2px 10px;
	border-bottom: 1px #222 solid;
    font-size: 0.7rem;
}

.border-darkgray li:last-child{
	border-bottom:none;
}

.schedule-list-item{
	margin-right: 0.1%;
	overflow: hidden;
	height: 120px;
}

.schedule-list-item:last-child{
	margin-right:0;
	overflow: hidden;
}

.schedule-block{
	border:1px solid #222;
	background: #050505;
	overflow: hidden;
	display: block;
}

.schedule-block:hover{
	border:1px solid #555;
	background: #050505;
}

.schedule-block img{
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.schedule-block a{
	margin: 0;
	padding: 0;
	display: inline-block;
}

.schedule-date {
	border-right:1px dashed #222;
	padding-right: 5px;
	font-weight: 600;
	font-size:11px;
}

.handle{
	cursor: grab;
}

.list-group-item.dialog{
	font-size: 15px;
	background: #222;
	color: #CCC;
}


.list-group-item.dialog .handle{
	color: #555;
}


.list-group-item.dialog .form-group{
	margin-bottom: 0;
}



.form-group-dark .chosen-container-single .chosen-single{
	background: #000;
	height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border:1px solid #191919;
    box-shadow:none;
    font-size: 0.9375rem;
    color: #999;
}


.form-group-dark .chosen-container-single .chosen-default{
	color: #333;
}

#dialogGroupForm{
	min-height: 400px;
}

.chosen-container-multi .chosen-choices{
	background: #0A0A0A;
	height: calc(1.5em + .75rem + 2px);
	border-radius: .25rem;
	padding: .125rem .25rem;
  border: 1px solid #191919;
  box-shadow:none;
  font-size: 0.9375rem;
  color: #999;
}

.chosen-container-multi .chosen-choices li.search-choice{
	padding: 5px 20px 5px 5px;
	background: #FFF;
	border: #DDD 1px solid;
}

#sortList{
	overflow: hidden;
}

.table td, .table th{
	text-align: center;
	padding: 2px 0px;
	vertical-align: middle;
	font-size: 0.7rem;
}

.table td{
	color: #999;
}

.table th{
	color: #666;
}


.table-dark {
    color: #AAA;
    background-color: #1d1e1f;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(132, 132, 132, 0.05);
}

.table-dark td, .table-dark th, .table-dark thead th {
    border-color: #111111;
}

thead tr th {
	color: #444;
}

.schedule-list{
	border:1px solid #222;
	
}

.schedule-item{
	font-size: 12px;
	border-bottom: 1px solid #222;
}

.schedule-item:last-child{
	border-bottom:none;
}




.d7rem{
	font-size: 0.7rem;
}

.fs13{
	font-size:13px;
}

.fs15{
	font-size:15px;
}

.fs17{
	font-size: 17px;
}

.fs18{
	font-size: 18px;
}

.fs20{
	font-size: 20px;
}

.fs24{
	font-size: 24px;
}

.fs30{
	font-size: 30px;
}

.fs40{
	font-size: 40px;
}

.fs60{
	font-size: 60px;
}


.form-control:disabled, .form-control[readonly] {
    background-color: #252525;
    opacity: 1;
}


.alert {
    position: relative;
    padding: .4rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert.compact{
	padding: .1rem 0.4rem;
}

.alert-link {
    font-weight: 500;
}

.alert-primary {
    color: #ddeaf9;
    background-color: #486380;
    border-color: #667f9a;
}

.alert-primary .alert-link {
    color: #b9d1ea;
}

.alert-secondary {
    color: #697075;
    background-color: #313131;
    border-color: #434548;
}

.alert-secondary .alert-link {
    color: #919192;
}


.alert-warning {
    color: #856404;
    background-color: #ffdf9d;
    border-color: #ffe7af;
}
.alert-warning .alert-link {
    color: #6d4600;
}

.alert-light {
    color: #b9b9b9;
    background-color: #151515;
    border-color: #212121;
}

.alert-light:hover{
    background-color: #191919;
    border-color: #2f2f2f;
}

.alert-light .alert-link,
.alert-light a {
    color: #3c3c3c;
}



.alert-success {
    color: #155724;
    background-color: #a0d48c;
    border-color: #a4f5b6;
}

.alert-danger {
    color: #d8afb3;
    background-color: #981420;
    border-color: #bf3342;
}

.alert-danger .alert-link {
    color: #ff6666;
}

code {
	color:#ff864c
}


a.title{
	font-size: 12px;
}

a.subNav{
	color: #999;
}

a.subNav.current{
	color: white;
	font-weight: bold;
}


div.mission {
	line-height: 28px;
	margin-bottom: 10px;
}
div.mission:last-child {
	margin-bottom:0px;
}

div.mission-title{
	background-color: #181818;
	border-radius: 5px;
	color: #CCC;
	padding: 0 5px;
}

div.mission-title.exigency{
	color: coral;
}

div.mission-title.pause{
	color: red;
}

div.mission-title.done{
	color: darkseagreen;
}

div.mission-title.doing{
	color: moccasin;
}

div.mission-status{
	float: left;
	background-color: #151515;
	padding: 0px 3px;
	border-radius: 5px;
	color: #CCC;
	line-height: 20px;
	margin: 4px 4px 2px 0;
	font-size: 9px;
}


div.mission-status.exigency{
	background-color: gold;
	color: maroon;
}

div.mission-status.pause{
	background-color: darkred;
	color: white;
}

div.mission-status.duty{
    background-color: #233052;
    color: #4f9db5;
}

div.mission-remark{
	background-color: #080808;
	padding: 0 5px;
	border-radius: 3px;
	color: #666;
}



div.mission-append{
	border-radius:3px;
	font-family: Roboto Mono;
	background-color: #1A1A1A;
	color:#555;
	font-size: 16px;
	margin-left:5px;
    float: right;
    text-align: center;
    line-height: 30px;

}



div.opinion-type{
	background-color: #111;
	border: 1px #1C1C1C solid;
	border-radius: 5px;
	color: #CCC;
	padding: 0 15px;
	text-align: center;
	margin: 5px;
}

div.opinion-title{
	background-color: #000;
	border-radius: 15px;
	color: #CCC;
	padding: 5px 10px;

}

div.opinion-user{
	text-align: center;
	background-color: #111;
	border: 1px #1C1C1C solid;
	border-radius: 5px;
	color: #AAA;
	padding: 0 15px;
	margin: 5px;
}

div.opinion-remark{
	padding: 5px 10px;
	line-height: 25px;
	background-color: #202020;
	border-radius: 15px;

}




.avatar{
	border-radius: 15px;
}


.table thead tr th {
	color: #555;
	background-color: #111;
    border-top: 1px solid #222;
    border-bottom: 1px solid #000;
    line-height: 1.5;
}

.table td, .table th{
	border:none;
	line-height: 1.1;
	background-color: #202020;
}
.table tr th,
.table tr td{
	border-bottom: 1px solid #161515;
}

.table td .status{
	padding: 3px 1px;
    margin: 2px;
    border-radius: 4px;
}

.count-tag {
	padding: 1px 2px;
	line-height: 1;
    border-radius: 4px;
    font-weight: bold;
}


.table td .status.none{
	color: #444;
}

.table td .status.todo{
	background-color: #606060;
    color: #262626;
}

.table td .status.doing,
.count-tag.doing
{
	background-color: #ffbf5f;
    color: #934a00;
}

.table td .status.complete{
	background-color: #bae9a3;
	color: #0e6447;
}

.table td .status.dead,
.count-tag.dead
{
	background-color: #d12d2d;
	color: #ffc7c7;
}

.job-title{
	background-color:rgb(15,15,15) ;
	padding: 20px;
	font-size: 22px;
	font-weight: 300; 
	border-radius: 5px;
	color: #c5bea2
}

.job-title:hover{
	background-color:rgb(18,18,18) ;
	color: white
}

/* Admin Toolbar - 页面内容区顶部管理工具条 */
.admin-toolbar-wrapper {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px 15px;
	background: #1a1a1a;
	border-bottom: 1px solid #333;
}
.admin-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #888;
	padding: 4px 10px;
	border: 1px solid #444;
	border-radius: 0;
	background: #111;
	text-decoration: none;
	transition: all 0.15s ease;
	line-height: 1.4;
}
.admin-toolbar-btn:hover {
	color: #aaa;
	background: #1a1a1a;
	border-color: var(--color-secondary, #6b9b9b);
	text-decoration: none;
}
.admin-toolbar-btn i {
	font-size: 11px;
	opacity: 0.7;
}

/* 用户下拉菜单 - 简约黑底白字 */
.user-dropdown-menu {
	background: #111;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 6px 0;
	margin-top: 8px;
	min-width: 160px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
	z-index: 1050;
}
.user-dropdown-menu .dropdown-item {
	color: #ccc;
	font-size: 13px;
	padding: 8px 16px;
	transition: background 0.1s, color 0.1s;
}
.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item:focus {
	background: #222;
	color: #fff;
}
.user-dropdown-menu .dropdown-item i {
	color: #666;
	font-size: 12px;
}
.user-dropdown-menu .dropdown-item:hover i {
	color: #999;
}
.user-dropdown-menu .dropdown-divider {
	border-top-color: #2a2a2a;
	margin: 4px 0;
}
#userDropdown::after {
	display: none; /* 隐藏 Bootstrap 默认的下拉箭头 */
}

/* 移动端导航 — 下拉菜单内联展开 (Tailwind + Alpine.js) */
@media (max-width: 1199.98px) {
	nav .user-dropdown-menu {
		position: static !important;
		float: none;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 4px 0 0;
		margin-top: 4px;
		text-align: center;
		min-width: auto;
	}
	nav .user-dropdown-menu .dropdown-item {
		display: inline-block;
		width: auto;
		padding: 6px 14px;
		color: #888;
		font-size: 12px;
	}
	nav .user-dropdown-menu .dropdown-item:hover {
		background: transparent;
		color: #fff;
	}
	nav .user-dropdown-menu .dropdown-divider {
		display: none;
	}
}


/* ================================================================
   SENSEGAMES — vis.css 补充
   vis.css 作为基础框架已提供 Grid / Display / Flex / Text /
   Navbar / Dropdown / Modal / Form / Badge / Popover / page-title-box /
   ascii-btn 等完整定义。以下仅补充 vis.css 未涵盖的工具类。
   ================================================================ */

/* ── Bootstrap 兼容 Spacing 工具类（ssssdev 仅有 mr-auto / ml-auto） ── */
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.p-0  { padding: 0 !important; }
.p-1  { padding: .25rem !important; }
.p-2  { padding: .5rem !important; }
.p-3  { padding: 1rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* ── Flex 补充 ── */
.justify-content-end { justify-content: flex-end !important; }

/* ========== sg-nav（参照 SSSSDEV） ========== */
.sg-nav {
	position: sticky;
	top: 0;
	z-index: 1050;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: #101010;
	border-bottom: 2px solid #222;
	padding: 10px 20px;
}
.sg-nav-brand {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	margin-right: 30px;
	padding: 5px 0;
	line-height: 30px;
}
.sg-nav-brand::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.sg-nav-brand:hover {
	color: rgba(255,255,255,0.8);
	text-decoration: none;
}
.sg-nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: none;
	color: #999;
	padding: 4px;
	cursor: pointer;
}
.sg-nav-toggle:hover { color: #fff; }
.sg-nav-body {
	display: flex;
	flex: 1;
	align-items: center;
}
.sg-nav-links {
	display: flex;
	align-items: center;
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sg-nav-link {
	display: block;
	padding: 0 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	white-space: nowrap;
}
.sg-nav-link:hover {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
}
.sg-nav-link--current {
	color: #fff;
	font-weight: bold;
}
.sg-nav-link--current::before {
	content: '[ ';
	color: #555;
	font-weight: 400;
}
.sg-nav-link--current::after {
	content: ' ]';
	color: #555;
	font-weight: 400;
}
.sg-nav-link--highlight {
	color: #ff4444;
	font-weight: 600;
}
.sg-nav-right {
	display: flex;
	align-items: center;
}
@media (max-width: 1199.98px) {
	.sg-nav-toggle { display: block; }
	.sg-nav-body {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}
	.sg-nav-body.open { display: flex; }
	.sg-nav-links {
		flex-direction: column;
		align-items: center;
		padding: 8px 0;
	}
	.sg-nav-link { padding: 10px 8px; }
	.sg-nav-right {
		justify-content: center;
		border-top: 1px solid #333;
		padding-top: 10px;
		margin-top: 6px;
	}
}

/* ========== card-admin-bar（卡片底部外延管理行） ========== */
.card-admin-bar {
	display: flex;
	gap: 12px;
	padding: 6px 12px;
	background: #111;
	border: 1px solid #2a2a2a;
	border-top: none;
	font-family: 'JetBrains Mono', monospace;
}
.card-admin-bar a {
	font-size: 11px;
	color: #444;
	text-decoration: none;
	transition: color 0.15s;
}
.card-admin-bar a:hover {
	color: #aaa;
	text-decoration: none;
}
.card-admin-bar a.del:hover {
	color: #c44;
}


/* ========== 谏言卡片（Message / Counsel） ========== */
/* 网格布局已标准化至 VISCSS msg-grid 组件（vis.css） */

/* 单张卡片 */
.msg-card {
	background: #0e0e0e;
	border: 1px solid #333;
	padding: var(--gap-md);
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s;
}
.msg-card:hover {
	border-color: #444;
}

/* 卡片内元素 */
.msg-card-id {
	font-size: 9px;
	color: #333;
	letter-spacing: 0.1em;
	margin-bottom: var(--gap-sm);
}
.msg-card-body {
	color: #ccc;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: var(--gap-sm);
	flex: 1;
	overflow-wrap: break-word;
	word-break: break-word;
}
.msg-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
}
.msg-card-user {
	color: #555;
	text-decoration: none;
	transition: color 0.15s;
}
a.msg-card-user:hover { color: #aaa; }
.msg-card-admin {
	display: flex;
	justify-content: center;
	gap: var(--gap-xs);
	margin-top: var(--gap-sm);
	padding-top: var(--gap-sm);
	border-top: 1px solid #222;
	font-size: 10px;
}

/* 发言表单 */
.msg-form {
	max-width: 640px;
	margin: 0 auto var(--gap-lg);
	padding: var(--gap-md);
	background: #111;
	border: 1px solid #222;
}
.msg-form-label {
	display: block;
	font-size: 11px;
	color: #555;
	letter-spacing: 0.08em;
	margin-bottom: var(--gap-sm);
}
.msg-form-input {
	width: 100%;
	min-height: 44px;
	max-height: 120px;
	padding: var(--gap-sm) var(--gap-md);
	font-size: 14px;
	line-height: 1.5;
	color: #ddd;
	background: #0a0a0a;
	border: 1px solid #2a2a2a;
	resize: none;
	overflow-x: hidden;
	overflow-y: auto;
	transition: border-color 0.15s;
	font-family: inherit;
}
.msg-form-input::placeholder { color: #444; }
.msg-form-input:focus {
	outline: none;
	border-color: #3a6a7a;
}
.msg-form-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--gap-sm);
}
.msg-form-count {
	font-size: 11px;
	letter-spacing: 0.05em;
}
.msg-form-submit {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 18px;
	border: 1px solid #3a6a7a;
	background: transparent;
	color: #4ecdc4;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
}
.msg-form-submit:hover {
	color: #fff;
	border-color: #4ecdc4;
	background: rgba(78,205,196,0.08);
}
.msg-form-submit:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	border-color: #333;
	color: #555;
}

/* 编辑弹窗 */
.msg-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap-lg);
}
.msg-modal-box {
	background: #111;
	border: 1px solid #333;
	padding: var(--gap-lg);
	min-width: 300px;
	max-width: 460px;
	width: 100%;
}