/*common.css*/
body {
	font-family:"Roboto",sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#fff;
	overflow-x:hidden;
	margin:0;
	padding:0;
	min-height:100vh;
	min-width:1200px;
	background:#0e0f0f;
	display:flex;
	flex-direction:column;
}
* {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	scroll-behavior:smooth;
}

textarea{font-family:"Roboto",sans-serif!important;}

a{text-decoration:none;}
a:focus,input:focus,textarea:focus,button:focus {
	text-decoration:none;
	outline:none;
}
a:focus,a:hover {
	text-decoration:none;
}
i,span,a {
	display:inline-block;
	transition:all linear 0.3s;
}
h1,h2,h3,h4,h5,h6 {
	font-family:"Roboto",sans-serif;
	font-weight:900;
	color:#0e1133;
	margin:0px;
}
h1 {
	font-size:48px;
}
h2 {
	font-size:36px;
}
h3 {
	font-size:28px;
}
h4 {
	font-size:22px;
}
h5 {
	font-size:18px;
}
h6 {
	font-size:16px;
}
ul,ol {
	margin:0px;
	padding:0px;
	list-style-type:none;
}
p {
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#505056;
	margin:0px;
}

/* ===== 文字颜色 ===== */
.text-primary {
    color: #ffffff!important;
}

.text-secondary {
    color: #a0a0a0!important;
}

.text-success {
    color: #aafc89!important;
}

.text-warning {
    color: #ffcc00!important;
}

.text-danger {
    color: #ff6b6b!important;
}

.text-info {
    color: #00f9e5!important;
}

.text-gradient {
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== 背景颜色 ===== */
.bg-primary {
    background-color: #1a1a1a;
}

.bg-secondary {
    background-color: #252525;
}

.bg-dark {
    background-color: #0f1217;
}

.bg-gradient {
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
}

/* ===== 按钮样式 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn i {
    margin-right: 8px;
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    color: #0f1217;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(170, 252, 137, 0.3);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

/* ===== 文字大小 ===== */
/* 超小文字 - 辅助文本、注释等 */
.text-xs {
    font-size: 12px;
    line-height: 1.4;
}

/* 小号文字 - 次要信息、表单标签等 */
.text-sm {
    font-size: 14px;
    line-height: 1.5;
}

/* 基础文字 - 普通正文内容 */
.text-base {
    font-size: 16px;
    line-height: 1.6;
}

/* 中号文字 - 小标题、强调文本 */
.text-md {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}

/* 大号文字 - 卡片标题、区块标题 */
.text-lg {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

/* 超大文字 - 页面主标题 */
.text-xl {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

/* 特大文字 - 特殊强调内容 */
.text-xxl {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== 特殊文字样式 ===== */
/* 数字强调样式 */
.text-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 代码/等宽字体 */
.text-mono {
    font-family: 'Roboto Mono', monospace;
    background: rgba(170, 252, 137, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border-left: 2px solid #aafc89;
}

/* 文字不换行 */
.text-nowrap {
    white-space: nowrap;
}

/* 文字截断 */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文字截断 (2行示例) */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/* ===== 边距工具类 ===== */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }

/* ===== 卡片样式 ===== */
.card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.card-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.card-title i {
    margin-right: 8px;
    color: #aafc89;
}

/* ===== 表单元素 ===== */
.form-control {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    transition: all 0.3s;
}

.form-control:focus {
    border-color: #aafc89;
    outline: none;
    box-shadow: 0 0 0 2px rgba(170, 252, 137, 0.2);
}

/* ===== 图标样式 ===== */
.icon-gradient {
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-column {
    flex-direction: column;
}

.hidden { display: none; }

/* ===== 动画效果 ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}


/* ===== 浮动定位 ===== */
/* 基础浮动定位 */
.float-left {
    float: left;
    margin-right: 16px;
    margin-bottom: 16px;
}

.float-right {
    float: right;
    margin-left: 16px;
    margin-bottom: 16px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 固定定位 - 适合悬浮按钮/工具栏 */
.fixed-top {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.fixed-bottom {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.fixed-left-center {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.fixed-right-center {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* 绝对定位 - 适合组件内部定位 */
.absolute-top {
    position: absolute;
    top: 20px;
    right: 20px;
}

.absolute-bottom {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

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

/* 粘性定位 - 适合滚动时固定 */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 18, 23, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(170, 252, 137, 0.1);
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: rgba(15, 18, 23, 0.9);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(170, 252, 137, 0.1);
}

/* 悬浮效果 - 增强科技感 */
.float-hover {
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.float-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(170, 252, 137, 0.2);
}

/* 浮动工具条 */
.float-toolbar {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999;
}

.float-toolbar-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(15, 18, 23, 0.9) 100%);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(170, 252, 137, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.float-toolbar-item:hover {
    background: linear-gradient(135deg, rgba(170, 252, 137, 0.1) 0%, rgba(0, 249, 229, 0.1) 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 24px rgba(170, 252, 137, 0.3);
}

.float-toolbar-item i {
    font-size: 18px;
    color: #aafc89;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .fixed-top,
    .fixed-bottom,
    .fixed-left-center,
    .fixed-right-center {
        position: absolute;
    }
    
    .float-toolbar {
        bottom: 20px;
        right: 20px;
    }
}




.container {
	flex:1;
	display:flex;
	min-height:0;
	height:calc(100vh - 60px);
}
/*左边导航区域*/
.left-sidebar {
	background:#0e0f0f;
	padding:20px 0;
	width:240px;
	flex-shrink:0;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	overflow-y:auto;
}
.sidebar-logo {
	padding:0 20px 20px;
	border-bottom:1px solid #2a2b2c;
	margin-bottom:20px;
}
.logo-text {
	color:#fff;
	font-size:24px;
	font-weight:700;
	text-align:left;
	overflow:hidden;
}

.logo-text img {
    height: 1.5em;
    width: auto;
    display: inline-block;
    vertical-align: top;
    margin-right: 0px;
}



.nav-menu {
	padding:0 20px;
}
.nav-item {
	position:relative;
	padding:8px 15px;
	margin:6px 0;
	border-radius:6px;
	color:#fff;
	cursor:pointer;
	transition:all 0.3s;
	display:flex;
	align-items:center;
	position:relative;
	text-decoration: none;
}
.nav-item:not(.active):hover {
	background:rgba(255,255,255,0.03);
}
.nav-item:not(.active):hover i {
	color:#aafc89 !important;
}
.nav-item:not(.active):hover span {
	color:#aafc89;
	text-shadow:0 0 8px rgba(170,252,137,0.3);
}
.nav-item:not(.active):hover {
	position:relative;
	background:linear-gradient(90deg,rgba(170,252,137,0.1) 0%,rgba(0,249,229,0.05) 100%);
}
.nav-item:not(.active):hover::after {
	content:'';
	position:absolute;
	right:-12px;
	top:50%;
	transform:translateY(-50%);
	border-width:8px;
	border-style:solid;
	border-color:transparent transparent transparent rgba(170,252,137,0.15);
}
.nav-item.active {
	background:#1d1d1d !important;
	text-decoration: none;
}
.nav-item.active i {
	color:transparent !important;
	background-image:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}
.nav-item span{
    font-size:14px;
}
.nav-item.active span {
	color:transparent;
	background-clip:text;
	-webkit-background-clip:text;
	background-image:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
	font-size:14px;
}
.nav-item:not(.disabled) i {
	color:#888;
}
.nav-item.active::after {
	content:'';
	position:absolute;
	right:-12px;
	top:50%;
	transform:translateY(-50%);
	border-width:8px;
	border-style:solid;
	border-color:transparent transparent transparent #1d1d1d;
}
.nav-item.active::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border-radius:6px;
	background:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
	z-index:-1;
}
.nav-item:not(.disabled) i {
	width:15px;
	height:15px;
	margin-right:12px;
	font-size:15px;
	color:#666;
}
.nav-item.disabled {
	color:#666;
	cursor:not-allowed;
}
.quick-links {
	padding:15px 20px;
	display:grid;
	grid-template-columns:1fr;
	gap:8px;
	margin-top:20px;
	border-top:1px solid #2a2b2c;
}
.quick-link-item {
	width:calc(100% - 10px);
	background:#1a1a1a;
	border-radius:8px;
	padding:6px 16px;
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
}
.quick-link-item:hover {
	background:#252525;
	transform:translateY(-2px);
}
.quick-link-item i {
	font-size:16px;
	margin-right:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	flex-shrink:0;
	width:24px;
	height:24px;
}
.quick-link-item span {
	font-size:14px;
	font-weight:500;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color:#fff;
}
/*右下角浮动*/
.float-btns {
	position:fixed;
	right:5px;
	bottom:80px;
	display:flex;
	flex-direction:column;
	gap:15px;
	z-index:999;
}
.float-item {
	width:48px;
	height:48px;
	border-radius:50%;
	background:rgba(255,255,255,0.1);
	backdrop-filter:blur(4px);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:all 0.3s;
	box-shadow:0 4px 12px rgba(0,0,0,0.2);
	position:relative;
}
.float-item:hover {
	background:rgba(255,255,255,0.15);
	transform:translateY(-3px);
}
.float-item i {
	font-size:20px;
	color:#fff;
}
.top-btn:hover i {
	color:#00f9e5;
}
.qrcode-panel {
	position:absolute;
	right:70px;
	top:50%;
	transform:translateY(-50%);
	background:rgba(255,255,255,0.9);
	padding:15px;
	border-radius:12px;
	box-shadow:0 8px 24px rgba(0,0,0,0.15);
	opacity:0;
	visibility:hidden;
	transition:all 0.3s;
}
.qrcode-panel img {
	width:160px;
	height:160px;
	margin-bottom:8px;
}
.qrcode-panel p {
	font-size:12px;
	color:#333;
	text-align:center;
}
.wechat-btn:hover .qrcode-panel {
	opacity:1;
	visibility:visible;
	right:80px;
}
/*右边区域*/
.right-content {
	flex:1;
	display:flex;
	flex-direction:column;
	min-width:calc(100% - 240px);
	margin-left:240px;
}
.tab-nav {
	display:flex;
	padding:0 20px;
	position:sticky;
	top:0;
	z-index:10;
	margin:15px 15px 15px;
	background:transparent;
}
.tab-item {
	padding:12px 24px;
	cursor:pointer;
	color:#666;
	transition:all 0.3s;
	position:relative;
	font-weight:500;
	margin-right:8px;
	border-radius:6px;
	background-clip:text;
	-webkit-background-clip:text;
	transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.tab-item:hover {
	color:#fff;
}
.tab-item.active {
	background-image:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	text-shadow:0 1px 2px rgba(0,0,0,0.3);
	box-shadow:0 2px 8px rgba(0,0,0,0.2);
	border-bottom:2px solid rgba(170,252,137,0.5);
}
.tab-item.active:hover {
	color:inherit;
}
.tab-item.active::after {
	content:'';
	position:absolute;
	bottom:-2px;
	left:0;
	width:100%;
	height:2px;
	background:linear-gradient(106deg,#aafc89 0,#00f9e5 44%,#2d60ff 100%);
}
/* 新增样式*/.user-status {
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:12px;
	padding:0 20px;
	background:rgba(255,255,255,0.05);
	border-radius:20px;
	height:40px;
	transition:all 0.3s;
}
.user-avatar {
	width:32px;
	height:32px;
	border-radius:50%;
	overflow:hidden;
	border:2px solid rgba(170,252,137,0.3);
}
.user-avatar img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.user-info {
	display:flex;
	flex-direction:column;
}
.user-name {
	color:#fff;
	font-size:12px;
	line-height:1.2;
}
.user-balance {
	display:flex;
	align-items:center;
	gap:4px;
	background:linear-gradient(106deg,#aafc89 0%,#00f9e5 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}
.user-balance i {
	font-size:12px;
	color:#aafc89;
	/* 闪电图标颜色*/;
}
.user-balance span {
	font-size:14px;
	font-weight:500;
}
/* 悬停效果*/.user-status:hover {
	background:rgba(170,252,137,0.1);
	transform:translateY(-1px);
}
/* 新增渐变样式*/.gradient-icon,.gradient-text {
	background-image:linear-gradient(        106deg,#aafc89 0%,/* 起始颜色*/        #00f9e5 44%,/* 中间颜色*/        #2d60ff 100%  /* 结束颜色*/    );
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}

/* 新增VIP样式 */
.user-balance i.fa-crown {
    color: #FFD700 !important;
    -webkit-text-fill-color: #FFD700;
    background-image: none;
}

/* 用户下拉菜单样式 */
.user-status {
    position: relative;
    cursor: pointer;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 160px;
    background: #1d1d1d;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.1);
}

.user-status:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.dropdown-item {
    padding: 8px 16px;
    color: #ddd;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    text-decoration: none;
}

.dropdown-item i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.dropdown-item:hover {
    background: rgba(170,252,137,0.1);
    color: #aafc89;
}

.dropdown-item:last-child {
    color: #ff6b6b;
}

.dropdown-item:last-child:hover {
    background: rgba(255,107,107,0.1);
}


/* 登录按钮样式 - 与左侧导航一致 */
.user-login-btn.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin: 0 15px 0 auto; /* 靠右对齐 */
}

.user-login-btn.nav-item i {
    font-size: 14px;
    color: #888;
    transition: all 0.3s;
}

.user-login-btn.nav-item span {
    font-size: 14px;
    color: #fff;
    transition: all 0.3s;
}

.user-login-btn.nav-item:hover {
    background: linear-gradient(90deg, rgba(170, 252, 137, 0.1) 0%, rgba(0, 249, 229, 0.05) 100%);
}

.user-login-btn.nav-item:hover i {
    color: #aafc89 !important;
}

.user-login-btn.nav-item:hover span {
    color: #aafc89;
    text-shadow: 0 0 8px rgba(170, 252, 137, 0.3);
}

.user-login-btn.nav-item:hover::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(170, 252, 137, 0.15);
}



/* 下拉菜单样式 */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 160px;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.user-status:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
}

.dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #ddd;
    font-size: 14px;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background: rgba(170, 252, 137, 0.1);
    color: #aafc89;
}

.dropdown-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* 渐变文本和图标 */
.gradient-text {
    background-image: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-icon {
    background-image: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}




/*底部*/
/* 底部CSS样式 */
.global-footer {
    background: #0e0f0f;
    color: rgba(255,255,255,0.7);
    padding: 40px 0 0;
    border-top: 1px solid #2a2b2c;
    font-size: 14px;
    margin-left:240px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid #2a2b2c;
}

.footer-links {
    display: flex;
    gap: 40px;
}

.link-group {
    min-width: 160px;
}

.link-title {
    color: #aafc89;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.link-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-group li {
    margin-bottom: 10px;
}

.link-group a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s;
}

.link-group a:hover {
    color: #aafc89;
    padding-left: 5px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item i {
    width: 20px;
    text-align: center;
    color: #aafc89;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 12px;
}

.copyright {
    color: rgba(255,255,255,0.5);
}

.beian a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: all 0.3s;
}

.beian a:hover {
    color: #aafc89;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-links {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}


/* 二维码区域样式 */
.footer-qrcode {
    display: flex;
    gap: 30px;
    padding: 0 20px;
}

.footer-qrcode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-qrcode-img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    border: 1px solid #2a2b2c;
    transition: transform 0.3s;
}

.footer-qrcode-img:hover {
    transform: scale(1.05);
}

.footer-qrcode-text {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    margin: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .footer-qrcode {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }
    
    .footer-qrcode-item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .footer-qrcode-img {
        width: 80px;
        height: 80px;
    }
}





/* 修改所有弹层容器 */
.layui-layer {
  background: #333 !important; /* 弹层背景色 */
  border: 1px solid #555 !important; /* 边框颜色 */
  border-radius: 8px !important; /* 圆角 */
  box-shadow: 0 5px 20px rgba(0,0,0,0.6) !important; /* 深色阴影 */
  color: #eee !important; /* 默认文字颜色 */
}

/* 标题栏 */
.layui-layer-title {
  background: #222 !important; /* 标题背景 */
  color: #fff !important; /* 标题文字 */
  border-bottom: 1px solid #444 !important; /* 标题分割线 */
  font-size: 16px !important;
  font-weight: bold !important;
}

/* 关闭按钮 */
.layui-layer-setwin .layui-layer-close {
  background-color: rgba(255,255,255,0.2) !important; /* 关闭按钮背景 */
  color: #ccc !important; /* 关闭图标颜色 */
}
.layui-layer-setwin .layui-layer-close:hover {
  background-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}

/* 内容区域 */
.layui-layer-content {

  line-height: 1.6 !important;
}

/* 按钮区域 */
.layui-layer-btn {
  background: #2d2d2d !important; /* 按钮栏背景 */
  border-top: 1px solid #444 !important;

}

/* 默认按钮（取消类） */
.layui-layer-btn a {
  background: #666 !important; /* 按钮背景 */
  border: 1px solid #555 !important;
  color: #ddd !important;
  border-radius: 4px !important;
}

/* 主按钮（确认类） */
.layui-layer-btn .layui-layer-btn0 {
  background: #1e9fff !important; /* 强调色-深蓝 */
  border-color: #1e9fff !important;
  color: #fff !important;
}

/* 加载层样式 */
.layui-layer-load {
  background: rgba(0,0,0,0.8) !important;
}
.layui-layer-load .layui-layer-load-icon {
  border-color: rgba(255,255,255,0.3) !important;
  border-top-color: #1e9fff !important; /* 加载动画颜色 */
}

/* 输入框样式 */
.layui-layer-input input {
  background: #444 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
}

/* 下拉选择框 */
.layui-layer-select select {
  background: #444 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
}


.n-msg{color:red;}

/* 灯泡提示图标 - 暗色风格 */
.n-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 8px; /* 与相邻元素的间距 */
}

/* 灯泡图标 */
.n-icon::before {
    content: "\f0eb"; /* Font Awesome 的 lightbulb 图标编码 */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Solid 样式 */
    font-size: 16px;
    color: #ffd43b; /* 灯泡黄色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

/* 悬停效果 - 灯泡发光 */
.n-icon:hover::before {
    color: #ffec99;
    text-shadow: 0 0 8px rgba(255, 212, 59, 0.6);
    transform: scale(1.1);
}


/* 分页样式 */
.pagination {
    margin-bottom: 30px auto!important;
    display: flex!important;
    justify-content: center!important;
    user-select: none!important;
}

.pagination ul {
    display: flex!important;
    gap: 8px!important;
    list-style: none!important;
    padding: 0!important;
    margin: 0!important;
}

.pagination li {
    min-width: 36px!important;
    height: 36px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 6px!important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)!important;
}

.pagination li a,
.pagination li span {
    color: #ddd!important;
    text-decoration: none!important;
    font-size: 14px!important;
    font-weight: 500!important;
    padding: 8px 12px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 4px!important;
    width: 100%!important;
    height: 100%!important;
}

.pagination li:not(.disabled):not(.active):hover {
    background: rgba(170, 252, 137, 0.1)!important;
}

.pagination li:not(.disabled):not(.active):hover a {
    color: #aafc89!important;
}

.pagination li.active {
    background: linear-gradient(106deg, #aafc89 0%, #00f9e5 100%)!important;
    box-shadow: 0 2px 8px rgba(170, 252, 137, 0.3)!important;
}

.pagination li.active span {
    color: #0e0f0f!important;
    font-weight: 600!important;
}

.pagination li.disabled {
    opacity: 0.5!important;
    cursor: not-allowed!important;
}

.pagination li.disabled span {
    color: #666!important;
}

/* 分页样式 */
.pager {
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    gap: 8px;
}

.pagination li {
    list-style: none;
}

.pagination li a, 
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s;
}

.pagination li a:hover {
    background: rgba(170, 252, 137, 0.2);
    color: #aafc89;
}

.pagination li.active span {
    background: linear-gradient(106deg, #aafc89 0, #00f9e5 44%, #2d60ff 100%);
    color: #000;
    font-weight: 600;
}

.pagination li.disabled span {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* 箭头图标样式 */
.pagination li:first-child a,
.pagination li:first-child span,
.pagination li:last-child a,
.pagination li:last-child span {
    font-size: 12px!important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .pagination li {
        min-width: 32px;
        height: 32px;
    }
    
    .pagination li a,
    .pagination li span {
        padding: 6px 8px;
        font-size: 13px;
    }
}


/* 极简提示栏样式 */
.simple-notice {
    background: rgba(30, 35, 40, 0.8);
    border-left: 3px solid #aafc89;
    color: #ddd;
    padding: 10px 15px;
    margin:0 0 20px 0;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    position:relative;
}

.simple-notice i {
    color: #aafc89;
    font-size: 16px;
}




/* 暗色系极简滚动条 - 黑底暗色渐变滑块 */
::-webkit-scrollbar {
    width: 8px;  /* 更细的滚动条 */
    height: 8px; /* 横向滚动条同步变细 */
}

::-webkit-scrollbar-track {
    background: #0a0a0a; /* 深黑轨道 */
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        rgba(170, 252, 137, 0.6) 0%,     /* 半透明暗绿 */
        rgba(0, 249, 229, 0.5) 50%,      /* 半透明暗青 */
        rgba(45, 96, 255, 0.6) 100%      /* 半透明暗蓝 */
    );
    border-radius: 2px;
    border: 0.5px solid rgba(0, 0, 0, 0.5); /* 深色边框 */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        to bottom,
        rgba(170, 252, 137, 0.7) 0%,
        rgba(0, 249, 229, 0.6) 50%,
        rgba(45, 96, 255, 0.7) 100%
    );
}

/* 火狐版本 */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: 
            linear-gradient(
                to bottom, 
                rgba(170, 252, 137, 0.6), 
                rgba(0, 249, 229, 0.5), 
                rgba(45, 96, 255, 0.6)
            ) #0a0a0a;
    }
}


.left-sidebar::-webkit-scrollbar {
    width: 5px;  /* 更细的滚动条 */
    height: 5px; /* 横向滚动条同步变细 */
}

.left-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0, 0.6) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    border-radius: 2px;
    border: 0.5px solid rgba(0, 0, 0, 0.5); /* 深色边框 */
}


/* 协议查看按钮样式 */
.view-agreement-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin-left: 10px;
    background: rgba(0, 249, 229, 0.1);
    color: #00f9e5;
    border: 1px solid rgba(0, 249, 229, 0.3);
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.view-agreement-btn:hover {
    background: rgba(0, 249, 229, 0.2);
    border-color: #00f9e5;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 249, 229, 0.2);
}

.view-agreement-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 添加图标（使用Font Awesome） */
.view-agreement-btn::before {
    content: "\f15c"; /* Font Awesome文件图标 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}




/* 调整VIP通知样式 */
.vip-notice {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 10px 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    color: #ffd700;
    font-size: 14px;
}

.vip-notice i {
    margin-right: 8px;
    color: #ffd700;
}

.vip-notice-positive {
    background: rgba(170,252,137,0.1);
    border: 1px solid rgba(170,252,137,0.3);
    color: #aafc89;
}

.vip-notice-positive i {
    color: #aafc89;
}

.vip-count {
    font-weight: bold;
    color: #fff;
    margin: 0 3px;
}

.vip-submit-btn {
    background: linear-gradient(106deg, #aafc89 0%, #00f9e5 100%);
    margin-top: 20px;
}

.vip-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(170,252,137,0.3);
}



/* VIP等级徽章基础样式 */
.vip-level-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-align: center;
    min-width: 50px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* VIP1-VIP8渐变配色 */
.vip-level-badge.vip1 {
    background: linear-gradient(135deg, #7EC8F8 0%, #3A7BD5 100%);
    border: 1px solid #5CA8F0;
}

.vip-level-badge.vip2 {
    background: linear-gradient(135deg, #00F2A6 0%, #00B4DB 100%);
    border: 1px solid #00D3A0;
}

.vip-level-badge.vip3 {
    background: linear-gradient(135deg, #FF9A8B 0%, #FF6B88 100%);
    border: 1px solid #FF7E7B;
}

.vip-level-badge.vip4 {
    background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);
    border: 1px solid #C495F1;
}

.vip-level-badge.vip5 {
    background: linear-gradient(135deg, #FFC371 0%, #FF5F6D 100%);
    border: 1px solid #FF8E53;
}

.vip-level-badge.vip6 {
    background: linear-gradient(135deg, #FF758C 0%, #FF7EB3 100%);
    border: 1px solid #FF6B8B;
}

.vip-level-badge.vip7 {
    background: linear-gradient(135deg, #6A11CB 0%, #2575FC 100%);
    border: 1px solid #8A2BE2;
}

.vip-level-badge.vip8 {
    background: linear-gradient(135deg, #00CDAC 0%, #02AAB0 100%);
    border: 1px solid #00E0B0;
}

/* VIP9特殊黑金设计 */
.vip-level-badge.vip9 {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
    border: 1px solid #FFD700;
    color: #FFD700;
    position: relative;
    overflow: hidden;
}

/* VIP9的金属质感效果 */
.vip-level-badge.vip9::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 215, 0, 0) 0%,
        rgba(255, 215, 0, 0) 45%,
        rgba(255, 215, 0, 0.3) 50%,
        rgba(255, 215, 0, 0) 55%,
        rgba(255, 215, 0, 0) 100%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: rotate(30deg) translate(-30%, -30%); }
    100% { transform: rotate(30deg) translate(30%, 30%); }
}

/* 所有徽章的悬浮效果 */
.vip-level-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .vip-level-badge {
        padding: 2px 8px;
        font-size: 11px;
        min-width: 40px;
    }
}