/* 用于后台的通用样式 */

/* 背景颜色 */
.bg-blue {background-color:#0082C8; color:#FFF;}
.bg-blue-light{background-color:#ddf2fa !important;}
.bg-blue-dark{background-color:#4980B5;}
.bg-gray {background-color:#CCC;}
.bg-cyan {background-color:#009999; color:#FFF !important;}  /* 青绿色 */
.bg-yellow{background-color:#f1bd1c; color:#FFF;}
.bg-yellow-light{background-color:#FFC !important;}
.bg-green{background-color:#0C3; color:#FFF;}
.bg-green-light{background-color:#F0FAEF !important;}  /* 浅绿色 */
.bg-orange-pink{background-color:#f1ddca;}


/* 文字颜色 */
.text-red, .text-red p{color:#F00;}  /** 红色 **/
.text-yellow, .text-yellow p{color:#FFE500;}  /** 黄色 **/
.text-golden, .text-golden p{color:#C90;}  /** 金色 **/
.text-orange, .text-orange p{color:#F79609;}  /** 橙色 **/
.text-green, .text-green p{color:green;}  /** 绿色 **/
.text-emeraldgreen, .text-emeraldgreen p{color:#99CC00;}  /** 翠绿色 **/
.text-cyan, .text-cyan p{color:#009999;}  /** 青色 **/
.text-darkblue, .text-darkblue p{color:#006699;}  /** 深蓝色 **/
.text-coffee, .text-coffee p{color:#960;}  /** 咖啡色 **/
.text-white, .text-white p{color:#FFF;}
.text-gray, .text-gray p{color:gray !important;}
.text-dark, .text-dark p{color:#333;}

/* 字号 */
.font-16, .font-16 p{font-size:16px;}
.font-30, .font-30 p{font-size:30px;}

/* 超链接 */
.link-blue:link {color:#0000ff;}  /* 蓝色 */
.link-blue:hover {color:#CC3300;}
.link-blue:visited {color:#0000ff;}
.link-red:link {color:#F00;}  /* 红色 */
.link-red:hover {color:#CC3300;}
.link-red:visited {color:#F00;}
.link-yellow:link {color:#FFE500;}  /* 黄色 */
.link-yellow:hover {color:#CC3300;}
.link-yellow:visited {color:#FFE500;}
.link-orange:link {color:#F79609;}  /* 橙色 */
.link-orange:hover {color:#CC3300;}
.link-orange:visited {color:#F79609;}
.link-green:link {color:#1f6608;}  /* 绿色 */
.link-green:hover {color:#CC3300;}
.link-green:visited {color:#1f6608;}
.link-cyan:link {color:#9F0;}  /*青色*/ 
.link-cyan:hover {color:#FFE500;}
.link-cyan:visited {color:#9F0;}
.link-white:link {color:#FFF;}  /* 白色 */
.link-white:hover {color:#FC0;}
.link-white:visited {color:#FFF;}
.link-black:link {color:#000;}  /* 黑色 */
.link-black:hover {color:#CC3300;}
.link-black:visited {color:#000;}
.link-gray:link {color:gray;}  /* 灰色 */
.link-gray:hover {color:#F30;}
.link-gray:visited {color:gray;}

/*彩色按钮*/
.btn-yellow{background: rgb(209, 209, 18); color:#FFF;} /*黄色按钮*/
.btn-yellow:hover{background: #C90; color:#FFF;} 
.btn-green{background: #396; color:#FFF;} /*绿色按钮*/
.btn-green:hover{background: #0C6; color:#FFF;}
.btn-emerald{background: #9C3; color:#FFF;} /*翠绿色按钮*/
.btn-emerald:hover{background: #996; color:#FFF;}
.btn-blue{background: #5dcbff; color:#FFF;} /*蓝色按钮*/
.btn-blue:hover{background: #40b6ee; color:#FFF;}
.btn-orange{background: #ff5700; color:#FFF;}/*橙色按钮*/
.btn-orange:hover{background: #e25d18; color:#FFF;}
.btn-purple{background: #6680ff; color:#FFF;}/*紫色按钮*/
.btn-purple:hover{background: #425de0; color:#FFF;}
.btn-gray{background: #7f7f7f; color:#FFF;}/*灰色按钮*/
.btn-gray:hover{background: #999; color:#FFF;}

/* 标签 */
.tag{top:0; left:3px; padding:2px 3px; border-radius:3px; margin: 0;}
.tag, tag a, tag a:hover{font-size:11px !important; }
.tag-border-red{border:1px solid red; color:red; }
.tag-bg-red{color:#FFF; background:#F00;}
.tag-bg-yellow{color:#FFF; background:#f1bd1c;}
.tag-bg-golden{color:#FFF; background:#C90;}
.tag-bg-gray{color:#666; background:#CCC;}
.tag-number-red{color:#FFF; background:#F00; border-radius:3px; padding:1px 5px; margin-left:3px;}

/* 突出显示区域（黄色背景）*/
.highlight{margin-left:auto; margin-right:auto; border: 1px solid #FC3; background-color:#FFC; margin:5px 0; padding:10px; border-radius:3px;}

/* 左右浮动 */
.fl{float:left;}
.fr{float:right;}

/*图片列表*/
.ImgList{display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%;}
.ImgList .item{text-align:center;}
.ImgList .item img{max-width:150px;	border:0;border-radius:5px;	margin-right:9px;}

/* 卡片式列表 */
.list-div{background-color:#fff; border-radius:5px; padding:20px 15px; margin-bottom:20px; border:1px solid #e6e6f2;}
.list-div a:hover{color:#F96D00;}
.list-div span{top:0;left:-3px;	font-size:inherit;}
.list-div img{max-width:100%;}

/* 现代时尚卡片（大圆角边框、阴影、悬停上移） */
.card-modern {
	background-color: #fff;
	line-height: 1.5rem;
	padding: 20px;
	border: none;
	border-radius: 15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}
.card-modern img {
	margin: 10px auto;
}
.card-modern:hover {
	transform: translateY(-5px);
}
.card-modern a:hover {
	color:#F96D00;
}


/* 玻璃拟物化效果 */
.glass-effects {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 1.5rem;
}


/*
  按钮列表：一个div中放置多个按钮（可能跨行）
  注意引用时的时候清除浮动
*/
.btn-list{padding:5px 15px; border-radius:3px; margin:5px 8px; display:flex; align-items: center; min-width:160px;}
.btn-list span {color:#999;}
.btn-list svg {width: 16px; height: 16px; display: inline-block; /* 确保图标按块级元素显示 */  margin-right: 8px;}

/* 常规白色div块 */
.div-white{background-color:#fff; border-radius:5px; padding:15px; margin-bottom:20px;
}


/*头像*/
.face {border-radius:50%; overflow: hidden; background-size:cover; background-position:50%; background-color:#ddd; margin-left:auto; margin-right:auto;}


/**
 * 悬停特效
 */
/* 块上移，下方出现阴影 */
.hover-shadow-up{	
	transition: all 0.3s ease;
}
.hover-shadow-up:hover {
	-webkit-box-shadow: 0 10px 6px -6px #d7d3d3;
	-moz-box-shadow: 0 10px 6px -6px #d7d3d3;
	box-shadow: 0 10px 20px rgba(0,0,0,0.08);
	transform: translateY(-5px);
}
/* 背景色变为淡绿色 */
.hover-bg-green:hover{
	background-color:#DFF5E0;
	border-radius:3px;
}


/*** 渐变背景色 ***/

/* 紫色 */
.bg-gradient-purple {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(45deg, #ff00ff, #6a0dad);
}


/**
 * 5.4. DA
 */
.DA {
	text-align: center;
	border-radius: 5px;
}

.DA img {
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.DA img:hover {
	opacity: 0.9;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


/* 手机版 */
@media (max-width: 768px) {
	.font-16, .font-16 p{font-size:18px;}
}