/* ========================================
   隐藏左侧游戏分类菜单滚动条
   ======================================== */
.game-category-menu {
	overflow-y: auto;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.game-category-menu::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* ========================================
   Layout Height Fix
   ======================================== */
html, body {
	height: 100%;
	width: 100%;
}

.theme-body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

/* ========================================
   隐藏登录页面表单滚动条
   ======================================== */
.login-form-div,
.admin-exit-form-div,
.register-form-div,
.home-cafeid-form-div {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.login-form-div::-webkit-scrollbar,
.admin-exit-form-div::-webkit-scrollbar,
.register-form-div::-webkit-scrollbar,
.home-cafeid-form-div::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}



.container::-webkit-scrollbar {
	display: none;
}

/* 允许滚动 */
.container {
	overflow: scroll;
	-ms-overflow-style: none; /* IE 和 Edge */
	scrollbar-width: none; /* Firefox */
}

#games .home-container .home-up-column .home-top5-games .game-heat {
	right:15px;
	background-color:#9B69E8;
	padding:1px 10px;
	border-radius: 20px; 
	margin:5px 1px 0 0;
	cursor: pointer;
	position: absolute;
}

#games .games-container {
	height: 100px;
	overflow: hidden;
}

#games .shop-container {
	height: 100px
}

#games .event-detail-container>div {
	border-bottom-left-radius: 0.5rem; 
	border-bottom-right-radius: 0.5rem;
}

#games .rank-container {
	height: 100px;
}

#games .rank-container .rank-game-logo {
	width: 200px;
	background-color: #303030;
	border-radius: 5px;
}

#games .games-container::-webkit-scrollbar, #game_items::-webkit-scrollbar, #product-list::-webkit-scrollbar, #games .shop-container::-webkit-scrollbar, #games #product_groups::-webkit-scrollbar { display: none; }

#games .game-item {
	margin-right: 15px;
	padding:0;
	float:left;
}

#games .game-image img {
	width: 136px;
}

#games .game-image {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

#games .game-image:hover .overlay {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#page_login {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: visible;
	overflow: hidden;
	display: block;
	/* 移除背景设置，由 body 或 JS 动态控制 */
}

#page_games {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: visible;
	overflow: hidden;
	display: none;
	/* 移除背景设置，由 body 或 JS 动态控制 */
}

/* news */
.video-box {
	width: 100%;
}

.news-qr {
	width: 100px;
	height: 100px;
	position: absolute; right: 20px; bottom: 0;
	z-index: 999;
}

.start-session-card-body {
	height: 325px;
}

.start-session-card-image {
	width: 138px;
	max-height: 138px;
}

#top-buttons-and-search-bar {
  margin-bottom:15px;
}

#games {
	margin: 0px auto auto auto;
	width: 100%;
	clear: both;
	display: flex !important;
	flex-direction: column !important;
	text-align:left;
	padding-top: 68px;
	position: relative;
}

#games::-webkit-scrollbar {
	display: none;
}
#block-div {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #999999;
	opacity: 0.7;
	overflow: hidden;
	display: none;
}

#page_lock {
	width:100%; height:100%; position:absolute; top:0; left:0; visibility:visible;
	overflow: hidden;
	display: none;
	z-index: 9999;
}

#page_login .pc_name {
	position:absolute;
	top:50px;
	left:25px;
	overflow: hidden;
	word-break: break-all;
	text-align: left;
	font-size:40px;
  padding: 0 20px;
	border-radius: 5px;
	color: #ffffff;
}

#page_login .nobilling-button { display: none; }

.cover { position: fixed; left:0; top:0; z-index:99999; width:100%; height:100%; overflow: hidden; display: none; }
.cover div { position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%); }

.shop-image img {
	width: 138px;
	height: 138px;
}

.shop-image {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
}

.shop-image .adult-only {
	position: absolute;
	top: 0;
	right: 4px;
	width: 40px;
	height: 40px;
}

.shop-image .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.shop-image:hover .overlay {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.shop-image .overlay .btn img {
	width: 24px;
	height: 24px;
}

.icon {
	color: #f0f0f0 !important;
}

.game-item .badge {
	position: absolute; top:-7px; right:-1px;
}
.carousel-inner {text-align: center;}

.tooltip {
	white-space: nowrap;
	font-size: 12px;
	opacity: 1;
}

.tooltip-inner {
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}

.tooltip.bottom {
  margin-top: 10px;
}

.events-container h2 {
  padding-bottom:10px;
  font-size:16px;
}

.events .event {
  position: relative;
  border: 1px solid transparent;
  display: inline-block;
  width: 100%;
  border-radius: 8px;
  cursor: default;
}

.events .event-past > div {
  border-radius: 8px;
}

.events .event-active > div {
  border-radius: 8px;
}

.events .event .icon {
  border-radius: 8px;;
}

.events .event .info {
  color: #cccccc;
  font-size: 14px;
}

.events .event .info .name {
  font-weight: bold;
  font-size: 1rem;
  color: #ffffff;
}

.events .event .info .time {
  color: #9c9797;
}

.events .event .info .countdown {
  color: #06ce6d;
}

.events .event .info p {
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding-left: 0.5rem;
}

.events .event .info p i, .events .event .info p img {
  margin-right:4px;
}
.events .icon {
	background-size: contain !important ;
}
.events .event-custom .icon {
  background: url(../images/custom-side.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.events .event-all .icon {
  background: url(../images/all-side.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.events .event-fortnite .icon {
  background: url(../images/fortnite-side.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.events .event-pubg .icon {
  background: url(../images/pubg-side.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.events .event-dota2 .icon {
  background: url(../images/dota2-side.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.events .event-csgo .icon {
  background: url(../images/csgo-side.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.events .event-lol .icon {
  background: url(../images/lol-side.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.events .event-valorant .icon {
  background: url(../images/valorant-side.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.events .event-apex .icon {
  background: url(../images/apex-side.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.event-detail .btn i {
  color: var(--client_themes_front_color);
}
.event-detail .btn[disabled] {
  background-color: rgba(242, 242, 242, 0.56);
}
.event-detail .btn[disabled] i {
  color:#cccccc;
}
.event-detail .event-detail-main .info p {
	font-size: 0.875rem;
	line-height: 1.8rem;
	padding-left: 0.5rem;
}

#top-buttons .btn {
  width: 180px;
}

#table-event-detail th, #table-event-detail td {
  font-size:15px;
}

.fa-2x {
	line-height: 1.5;
}
.required:after{ color:red; content:"*";}

[v-cloak] { display: none !important; }

:root {
  --client_themes_front_color: #49d149;
  --client_themes_front_color_90: #49d149e6;
  --client_themes_front_color_75: #49d149c0;
  --client_themes_back_color: #111111;
  --client_themes_back_color_90: #111111e6;
  --client_themes_back_color_75: #111111c0;
}

#game_items, #product-list {
	overflow-y: auto;
}
#product-list>div {
	padding-right:15px; float:left;
}
/* ========================================
   SweetAlert 弹窗样式 (Pay Order 等)
   ======================================== */
.sweet-alert {
	background: rgba(14, 18, 29, 0.95) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 12px !important;
	padding: 24px 32px 28px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.sweet-alert h2 {
	color: #ffffff !important;
	font-family: "Rubik", sans-serif !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 1.4 !important;
	margin: 0 0 16px 0 !important;
}
.sweet-alert p {
	color: #b1b1b5 !important;
	font-family: "Rubik", sans-serif !important;
	font-size: 14px !important;
}
/* Pay Order 内容区域 */
.sweet-alert .pay-order-box {
	flex-direction: column !important;
	gap: 12px !important;
}
.sweet-alert .pay-order-box ol {
	color: #c0c6d8 !important;
	font-family: "Rubik", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
	padding-left: 20px !important;
	margin: 0 !important;
}
.sweet-alert .pay-order-box img {
	border-radius: 8px !important;
	max-width: 266px !important;
	margin: 8px auto !important;
	display: block !important;
}
/* 支付网关标签 */
.sweet-alert .pay-order-box .text-uppercase {
	display: inline-block !important;
	font-family: "Rubik", sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.5px !important;
	color: #576081 !important;
	background: rgba(87, 96, 129, 0.15) !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	margin-top: 8px !important;
}
/* 按钮通用 */
.sweet-alert button {
	font-family: "Rubik", sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 12px 32px !important;
	min-width: 140px !important;
	transition: all 0.2s ease !important;
	#display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* 确认按钮 (Go to order) */
.sweet-alert button.confirm {
	background: #1d9f57 !important;
	color: #ffffff !important;
}
.sweet-alert button.confirm:hover {
	background: #168f4a !important;
}
/* 取消按钮 (Close) */
.sweet-alert button.cancel {
	background: transparent !important;
	color: #576081 !important;
}
.sweet-alert button.cancel:hover {
	color: #7c8ab0 !important;
	background: transparent !important;
}
/* 成功/错误图标背景修复 */
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after {
	background: inherit !important;
}
.sweet-alert .sa-icon.sa-success .sa-fix {
	background: inherit !important;
}

.client-themes-back-color-75 {
	background-color: var(--client_themes_back_color_75);
}
.client-themes-back-color-90 {
	background-color: var(--client_themes_back_color_90);
}
.client-themes-back-color {
	background-color: var(--client_themes_back_color);
}

#page_lock #unlockForm div.client-form-row label,
#page_login #loginForm div.client-form-row label, 
#page_login #adminexitForm div.client-form-row label,
#page_login #registerForm div.client-form-row label,
#page_login #homecafeidForm div.client-form-row label {
	line-height: 1;
}
#page_lock #unlockForm div.client-form-row i,
#page_login #loginForm div.client-form-row i, 
#page_login #adminexitForm div.client-form-row i,
#page_login #registerForm div.client-form-row i,
#page_login #homecafeidForm div.client-form-row i	{
	font-size: 2.8125rem;
}
#page_lock #unlockForm div.client-form-row input,
#page_login #loginForm div.client-form-row input, 
#page_login #adminexitForm div.client-form-row input,
#page_login #registerForm div.client-form-row input,
#page_login #homecafeidForm div.client-form-row input {
	height: 3.6rem;
	font-size: 1.5rem;
}

.client-btn-success {
  background-color: #1d9f57 !important;
  border-radius: 5px !important;
  border: none !important;
  color: #fff !important;
}

.client-btn-success:hover {
  background-color: #168f4a !important;
}

.client-btn-close {
  background-color: #6c757d !important;
  border-radius: 5px !important;
  border: none !important;
  color: #fff !important;
}

.client-btn-close:hover {
  background-color: #5a6268 !important;
}

.menu-avatar-dropdown {
	background: var(--client_themes_back_color_90) !important;
}

.promoted-product .overlay {
	position: absolute;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.promoted-product:hover .overlay {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.promoted-product .overlay .btn img {
	width: 24px;
	height: 24px;
}

.dropdown-item-active {
	background: #222;
	color: var(--client_themes_front_color);
}

#bottom-run-games {
	height: 80%;
	width: 95%;
	overflow: hidden;
}
#bottom-run-games .run-game-icon {
	height: 100%;
	aspect-ratio: 1/1;
	margin: 0 5px;
}
#bottom-run-games .run-game-icon img {
	height: 100%;
	aspect-ratio: 1/1;
}

.triggle {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 180px 0px 0 180px;
	border-color: #E4E4E440 transparent transparent transparent;
}

.header-area {
	width: 100%;
	border-radius: 0.3125rem;
}

#home_carousel_promoted .carousel-item.active {
	display: flex;
}

label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	margin-bottom: 0px;
	cursor: inherit;
	color: inherit;
}

.border-block {
	background: linear-gradient(240deg,#20202020,#50505050);
	box-shadow: 0 4px 4px rgb(0 0 0 / 50%);
}
.border-header {
	background: linear-gradient(240deg,#20202020,#50505050);
	box-shadow: 0 4px 4px rgb(0 0 0 / 50%);
}

.member-group {
	background-color:#395A2A;
	border:1px solid #ffffff;
}
.member-current-group {
	background-color:#43AE1D;
}
.group-left {
	border-start-start-radius:5px;
	border-end-start-radius:5px;
	border-right-width: 0px;
}
.group-right {
	border-start-end-radius:5px;
	border-end-end-radius:5px;
	border-left-width: 0px;
}
.order-list-content {
	overflow: auto;
	max-height: 400px;
}
.max-width-90 {
	max-width: 90%;
}
.custom-scrollbar {
	max-height: 400px;
	overflow: auto;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #555 #1a1a1a;
}

/* Webkit Browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
	width: 8px; /* Adjust scrollbar width */
	border-radius: 30px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #1a1a1a; /* Dark background */
	border-radius: 10px; /* Smooth edges */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #444, #666); /* Gradient for a premium feel */
	border-radius: 10px; /* Rounded scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #555, #777); /* Subtle hover effect */
}

.page-item {
	cursor: pointer;
	border: none;
}

.search-box-icon {
	line-height: 40px;
	padding: 0 8px;
}

.search-box-content {
	background: transparent !important;
	padding-left:30px;
	height: 40px;
	font-size:12px;
}

.modal-content-order {
	background-color: #222437;
}

.table thead th {	
	border-top: 0;
	font-weight: 600;
	font-size: 0.8125rem;
	padding: 1rem 0.625rem;
	border-bottom: 1px solid #1c1e2f;
	position: sticky;
	background-color: #27293d;
	top: -1px;
	white-space: nowrap;
	color: #337ab7;
}

.pagination-info .page-item:hover a, .page-item.active .page-link{
	background: #1bb3fe;
	border-color: #02abfe;
	color: #ffffff;
}

.myModalOrderList .table th,
.myModalOrderList .table td {
	border-bottom: 1px solid #313452;
}

.myModalTopupLogin .razorpay-qr-img ,
.myModalTopup .razorpay-qr-img {
	width: 266px;
	height: 350px;
	background: white;
	border: 1px solid black;
	border-radius: 5px;
	position:relative;
	overflow:hidden;
}

.myModalTopupLogin .razorpay-qr-img img,
.myModalTopup .razorpay-qr-img img {
	position:absolute;
	top:-90%;
	left:-25%;
	width:150%;
	max-width:150%;
}

.myModalTopupLogin .topup-payment-type-img,
.myModalTopup .topup-payment-type-img,
.inline-topup-payment-type-img {
	width: 266px;
	max-width: 266px;
}

.adult-only::before {
	content: "\01F51E";
	font: bold 36px/1 'Arial Black', sans-serif;
	display: inline-block;
}

.custom-transparent-toast {
	opacity: 1 !important;
}

.custom-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 10rem;
	padding: 0.5rem 0;
	margin: 0.125rem 0 0;
	color: #212529;
	text-align: left;
	list-style: none;
	background-clip: padding-box;
	border-radius: 0.25rem;
	background: #111;
	background: linear-gradient(#151515, #111);
	border: 1px solid #444;
	font-size: 0.8125rem;
}

.dropdown-submenu>.custom-dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
}

.modal-backdrop {
  opacity: 0 !important;
  background-color: transparent !important;
}

/* 字体定义 */
@font-face {
  font-family: "Rubik";
  src: url("../webfonts/Rubik-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

html, body {
  font-family: "Rubik", sans-serif !important;
  overflow: hidden;
}

/* 隐藏滚动条 */
body::-webkit-scrollbar {
  width: 0px;
  display: none;
}

body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ========================================
   登录页面样式
   ======================================== */
#page_lock .unlock-form-div,
#page_login .login-form-div,
#page_login .admin-exit-form-div,
#page_login .register-form-div,
#page_login .home-cafeid-form-div {
  z-index: 3 !important;
  padding: 24px 24px 0px !important;
  gap: 40px !important;
  isolation: isolate;
  width: 420px !important;
  max-width: 420px !important;
  min-width: 420px !important;
  height: 100vh !important;
  left: calc(50% - 420px / 2) !important;
  top: 0 !important;
  background: rgba(14, 18, 29, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 登录页面布局 */
#page_login .loginDiv {
  position: relative !important;
  height: 100% !important;
}

/* 底部信息区域 */
#page_login .login-footer-info,
#page_lock .login-footer-info {
  right: 25px !important;
  bottom: 25px !important;
  gap: 12px !important;
  height: 40px !important;
  z-index: 9998 !important;
  width: auto !important;
  left: auto !important;
}

#page_login .login-footer-info .footer-item,
#page_lock .login-footer-info .footer-item {
  transition: all 0.3s ease;
  flex-shrink: 0 !important;
}

#page_login .login-footer-info .footer-item.version-text,
#page_login .login-footer-info #version_date,
#page_lock .login-footer-info .footer-item.version-text,
#page_lock .login-footer-info #version_date_lock {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 15px !important;
  color: #576081 !important;
  cursor: default !important;
  white-space: nowrap !important;
  overflow: visible !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
}

#page_login .login-footer-info #language-selector,
#page_lock .login-footer-info #language-selector-lock {
  cursor: pointer;
  transition: all 0.3s ease;
}

#page_login .login-footer-info #language-selector:hover,
#page_lock .login-footer-info #language-selector-lock:hover {
  opacity: 1;
}

#page_login .login-footer-info #language-selector #current-language,
#page_login .login-footer-info #language-selector span,
#page_lock .login-footer-info #language-selector-lock #current-language-lock,
#page_lock .login-footer-info #language-selector-lock span {
  width: 16px;
  height: 14px;
  font-family: "Rubik", sans-serif;
  font-style: normal;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-align: center;
  text-transform: uppercase !important;
  color: #ffffff !important;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* 电源/重启按钮 */
.feedback-icon {
  position: relative;
  z-index: 9999;
}

#page_login .feedback-icon,
#page_lock .feedback-icon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 30px 24px 30px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
}

.feedback-icon a.power-button {
  position: absolute;
  bottom: 20px;
  left: 28px;
  width: 40px;
  height: 40px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  transition: all 0.2s ease;
  pointer-events: auto;
  z-index: 9999;
}

.feedback-icon a.reboot-button {
  position: absolute;
  bottom: 20px;
  left: 81px;
  width: 40px;
  height: 40px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  transition: all 0.2s ease;
  pointer-events: auto;
  z-index: 9999;
}

.feedback-icon a.power-button:hover,
.feedback-icon a.reboot-button:hover {
  background: rgba(35, 44, 69, 0.9);
  transform: scale(1.1);
}

.feedback-icon a.power-button i,
.feedback-icon a.reboot-button i {
  font-size: 18px;
  color: #ffffff;
}

/* ========================================
   解锁页面样式
   ======================================== */
#page_lock .unlock-form-div #unlockForm {
  gap: 40px !important;
}

#page_lock .unlock-form-div h2 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.185em !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

#page_lock .unlock-form-div .form-group {
  gap: 8px !important;
  margin: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#page_lock .unlock-form-div .form-group::before {
  content: "Password";
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.171875em !important;
  color: #576081 !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

#page_lock .unlock-form-div .password-wrapper {
  position: relative;
  width: 100%;
}

#page_lock .unlock-form-div .unlock-input {
  background-color: rgba(24, 29, 39, 0.95) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  height: 48px !important;
  padding: 12px 48px 12px 16px !important;
  font-size: 14px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  transition: all 0.3s ease;
  width: 100% !important;
  box-sizing: border-box !important;
}

#page_lock .unlock-form-div .unlock-input:focus {
  background-color: rgba(24, 29, 39, 1) !important;
  border-color: rgba(87, 96, 129, 0.5) !important;
  outline: none !important;
  box-shadow: none !important;
}

#page_lock .unlock-form-div .unlock-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

#page_lock .unlock-form-div .password-toggle-unlock {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

#page_lock .unlock-form-div .password-toggle-unlock g {
  opacity: 0.4 !important;
}

#page_lock .unlock-form-div .password-toggle-unlock:hover g {
  opacity: 0.7 !important;
}

#page_lock .unlock-form-div .password-toggle-unlock path {
  stroke: #576081 !important;
}

#page_lock .unlock-form-div .btn-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

#page_lock .unlock-form-div .btn-unlock {
  width: 100% !important;
  padding: 10px 20px !important;
  background: #1d9f57 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.185em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  height: 50px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page_lock .unlock-form-div .btn-unlock:hover {
  background: #168f4a !important;
}

#page_lock .unlock-form-div .btn-unlock i {
  display: none !important;
}

/* ========================================
   Admin Exit 表单样式
   ======================================== */
#page_login .admin-exit-form-div #adminexitForm {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 40px !important;
}

#page_login .admin-exit-form-div .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

#page_login .admin-exit-form-div .form-label {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.171875em !important;
  color: #576081 !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

#page_login .admin-exit-form-div .password-wrapper {
  position: relative;
  width: 100%;
}

#page_login .admin-exit-form-div .admin-exit-input {
  background-color: rgba(24, 29, 39, 0.95) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  height: 48px !important;
  padding: 12px 48px 12px 16px !important;
  font-size: 14px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  transition: all 0.3s ease;
  width: 100% !important;
  box-sizing: border-box !important;
}

#page_login .admin-exit-form-div .admin-exit-input:focus {
  background-color: rgba(24, 29, 39, 1) !important;
  border-color: rgba(87, 96, 129, 0.5) !important;
  outline: none !important;
  box-shadow: none !important;
}

#page_login .admin-exit-form-div .admin-exit-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

#page_login .admin-exit-form-div .password-toggle-admin-exit {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

#page_login .admin-exit-form-div .password-toggle-admin-exit g {
  opacity: 0.4 !important;
}

#page_login .admin-exit-form-div .password-toggle-admin-exit:hover g {
  opacity: 0.7 !important;
}

#page_login .admin-exit-form-div .password-toggle-admin-exit path {
  stroke: #576081 !important;
}

#page_login .admin-exit-form-div .d-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px !important;
}

#page_login .admin-exit-form-div .client-btn-success {
  width: 100% !important;
  padding: 10px 20px !important;
  background: #1d9f57 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.185em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  height: 50px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page_login .admin-exit-form-div .client-btn-success.mr-3 {
  margin-right: 0 !important;
}

#page_login .admin-exit-form-div .client-btn-success:hover {
  background: #168f4a !important;
}

#page_login .admin-exit-form-div .client-btn-success i {
  display: none !important;
}

#page_login .admin-exit-form-div .client-btn-close {
  width: 100% !important;
  padding: 10px 20px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.185em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page_login .admin-exit-form-div .client-btn-close:hover {
  opacity: 1;
}

#page_login .admin-exit-form-div .client-btn-close i {
  display: none !important;
}

/* ========================================
   弹窗样式
   ======================================== */
.modal-content {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}

.close {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

.close:hover {
  opacity: 1 !important;
}

/* 弹窗输入框 */
.modal-input {
  background-color: rgba(24, 29, 39, 0.95) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* ========================================
   底部运行游戏区域
   ======================================== */
.bottom-section {
  width: 40%;
  margin: 0 30%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(240deg, #20202020, #50505050);
  backdrop-filter: blur(10px);
}

/* ========================================
   右键菜单样式
   ======================================== */
.context-menu-list {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.context-menu-item {
  color: #ffffff !important;
  background-color: rgba(14, 18, 29, 0.95) !important;
}

.context-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   弹窗通用样式增强
   ======================================== */
/* 弹窗标题居中 */
.modal-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  padding: 20px 24px !important;
  border: none !important;
}

.modal-title {
  text-align: center !important;
  width: 100% !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: #ffffff !important;
}

/* 关闭按钮绝对定位到右侧 */
.modal-header .close {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.6 !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
}

/* 弹窗 body */
.modal-body {
  padding: 20px 40px !important;
}

/* 弹窗 footer */
.modal-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: none !important;
}

/* 按钮组 - 上下排布 */
.modal-footer .btn-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 20px !important;
}

/* ========================================
   注册弹窗样式 - myModalRegisterMember
   ======================================== */
.myModalRegisterMember .modal-dialog {
  width: 572px !important;
  max-width: 572px !important;
}

.myModalRegisterMember .modal-body .row {
  #margin: 0 0 20px 0 !important;
}

.myModalRegisterMember .modal-body .form-group label {
  color: #576081 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

.myModalRegisterMember .modal-body .form-check {
  color: #576081 !important;
}

.myModalRegisterMember .modal-body .form-check a {
  color: #3faa5e !important;
}

.myModalRegisterMember .modal-footer .btn-group {
  flex-direction: column !important;
  width: 100% !important;
  gap: 12px !important;
}

/* ========================================
   Guest Topup Login 弹窗 - myModalTopupLogin
   ======================================== */
.myModalTopupLogin .modal-dialog {
  width: 460px !important;
  max-width: 460px !important;
}

.myModalTopupLogin .modal-body .form-group label {
  color: #576081 !important;
  font-size: 13px !important;
}

.myModalTopupLogin #login_payment_qr img,
.myModalTopupLogin #login_payment_type img,
.myModalTopupLogin #login_payment_url img {
  width: 256px !important;
  height: 256px !important;
}

.myModalTopupLogin .modal-body .error-message {
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 15px !important;
  color: #ff3347 !important;
  margin-top: 8px !important;
}

.myModalTopupLogin .modal-body .error-message.show {
  display: block !important;
}

.myModalTopupLogin .modal-body .error-message.d-none {
  display: none !important;
}

/* 红框验证 - 输入框错误状态 */
.myModalTopupLogin .modal-body .form-control.is-invalid,
.myModalTopupLogin .modal-body .form-control.error {
  border-color: #ff3347 !important;
  box-shadow: 0 0 0 1px #ff3347 !important;
}

.myModalTopupLogin #topup-summary {
  margin-top: 20px !important;
}

.myModalTopupLogin #topup-summary .form-group {
  margin-bottom: 12px !important;
}

.myModalTopupLogin #topup-summary .topup-summary-value {
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #f5f8ff !important;
}

.myModalTopupLogin .modal-footer #btn-group.d-none {
  display: none !important;
}

/* ========================================
   Social Login 弹窗 - myModalMemberLogin
   ======================================== */
.myModalMemberLogin .modal-dialog {
  width: 460px !important;
  max-width: 460px !important;
}

.myModalMemberLogin .modal-body {
  padding: 0 !important;
}

/* ========================================
   QR Register 弹窗 - myModalQRMemberRegister
   ======================================== */
.myModalQRMemberRegister .modal-dialog {
  width: 400px !important;
  max-width: 400px !important;
}

.myModalQRMemberRegister .modal-body {
  padding: 0 !important;
}

/* ========================================
   Forgot Password 弹窗 - myModalForgotPassword
   ======================================== */
.myModalForgotPassword .modal-dialog {
  width: 426px !important;
  max-width: 426px !important;
}

.myModalForgotPassword .modal-body .form-group label {
  color: #576081 !important;
  font-size: 13px !important;
}

/* ========================================
   Member Topup 弹窗 - myModalTopup
   ======================================== */
.myModalTopup .modal-dialog {
  width: 460px !important;
  max-width: 460px !important;
}

.myModalTopup .modal-body .form-group label {
  color: #576081 !important;
  font-size: 13px !important;
}

.myModalTopup .modal-body .error-message {
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 15px !important;
  color: #ff3347 !important;
  margin-top: 8px !important;
}

.myModalTopup .modal-body .error-message.show {
  display: block !important;
}

.myModalTopup .modal-body .error-message.d-none {
  display: none !important;
}

/* 红框验证 - 输入框错误状态 */
.myModalTopup .modal-body .form-control.is-invalid,
.myModalTopup .modal-body .form-control.error {
  border-color: #ff3347 !important;
  box-shadow: 0 0 0 1px #ff3347 !important;
}

.myModalTopup #topup-summary {
  margin-top: 20px !important;
}

.myModalTopup #topup-summary .form-group {
  margin-bottom: 12px !important;
}

.myModalTopup #topup-summary .topup-summary-value {
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #f5f8ff !important;
}

/* QR code size - using library default 256px for better 4K screen compatibility */
.myModalTopup #payment_qr img,
.myModalTopup #payment_type img,
.myModalTopup #payment_url img {
  width: 256px !important;
  height: 256px !important;
}

.myModalTopupLogin #login_payment_url .razorpay-qr-img img,
.myModalTopup #payment_url            .razorpay-qr-img img {
  width: auto !important;
  height: auto !important;
}

.myModalTopup .modal-footer #btn-group-topup.d-none {
  display: none !important;
}

/* ========================================
   Register Member 弹窗 - myModalRegisterMember 红框验证
   ======================================== */
.myModalRegisterMember .modal-body .error-message {
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 15px !important;
  color: #ff3347 !important;
  margin-top: 8px !important;
}

.myModalRegisterMember .modal-body .error-message.show {
  display: block !important;
}

.myModalRegisterMember .modal-body .error-message.d-none {
  display: none !important;
}

/* 红框验证 - 输入框错误状态 */
.myModalRegisterMember .modal-body .form-control.is-invalid,
.myModalRegisterMember .modal-body .form-control.error {
  border-color: #ff3347 !important;
  box-shadow: 0 0 0 1px #ff3347 !important;
}

/* ========================================
   弹窗按钮样式统一
   ======================================== */
/* 成功按钮 */
.modal .client-btn-success,
.modal .modal-footer .client-btn-success {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  background: #1d9f57 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding: 0 24px !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
}

.modal .client-btn-success:hover:not(:disabled),
.modal .modal-footer .client-btn-success:hover:not(:disabled) {
  background: #188f4d !important;
}

.modal .client-btn-success:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 隐藏图标，显示文字 */
.modal .client-btn-success i,
.modal .modal-footer .client-btn-success i,
.modal .modal-footer .btn i.fal,
.modal .modal-footer .btn i.fa,
.modal .modal-footer .btn i.fas {
  display: none !important;
}

/* 关闭/取消按钮 */
.modal .client-btn-close,
.modal .modal-footer .client-btn-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  min-width: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  color: #576081 !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
}

.modal .client-btn-close:hover,
.modal .modal-footer .client-btn-close:hover {
  color: #7c8ab0 !important;
  background: transparent !important;
}

/* 隐藏图标，显示文字 */
.modal .client-btn-close i,
.modal .modal-footer .client-btn-close i {
  display: none !important;
}


/* ========================================
   Header 区域完整样式覆盖
   ======================================== */
.header-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.header-section .header-area {
  padding: 12px 30px !important;
  width: 100% !important;
  height: 68px !important;
  background: rgba(14, 18, 29, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Logo 区域 */
.header-section .header-area .logo {
  position: absolute !important;
  left: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
}

.header-section .header-area .logo img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.header-section .header-area .header-menu {
  padding: 4px !important;
  gap: 4px !important;
  margin: 0 auto !important;
  height: 44px !important;
  background: rgba(20, 23, 28, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 50px !important;
}

.header-section .header-area .header-menu .menu-icon-link {
  padding: 5px 16px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #576081;
}

.header-section .header-area .header-menu .menu-icon-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.header-section .header-area .header-menu .menu-icon-link.active {
  background: rgba(76, 175, 80, 0.25) !important;
  border: 1px solid #4CAF50 !important;
  box-shadow: 0 0 15px 3px rgba(76, 175, 80, 0.3) !important;
  color: #ffffff !important;
}

/* 菜单 SVG 图标 */
.header-section .header-area .header-menu.text-white .menu-icon {
  width: 20px !important;
  height: 20px !important;
  color: #576081 !important;
  transition: all 0.3s ease !important;
}

.header-section .header-area .header-menu.text-white .menu-icon.header-menu-active {
  color: #ffffff !important;
}

.header-section .header-area .header-menu.text-white .menu-icon-link:not(.active):hover .menu-icon:not(.header-menu-active) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 右侧信息区域 */
.header-section .header-area .position-absolute.r-8 {
  position: absolute !important;
  right: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.header-section .header-area .header-right-info {
  gap: 24px !important;
  height: 44px !important;
}

.header-section .header-area .header-time {
  gap: 8px !important;
}

.header-section .header-area .header-time span {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #ffffff !important;
}

.header-section .header-area .header-sound {
  width: 36px !important;
  height: 36px !important;
  background: #1c2438 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.header-section .header-area .header-sound:hover {
  background: #232c45 !important;
}

.header-section .header-area .header-balance {
  gap: 8px !important;
  cursor: pointer !important;
}

.header-section .header-area .header-balance span {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #ffffff !important;
}

/* 头像下拉 */
.header-section .header-area .dropdown {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

.header-section .header-area .dropdown img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  cursor: pointer !important;
}

/* 下拉菜单 */
.header-section .header-area .dropdown-menu {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  padding: 8px 0 !important;
  min-width: 180px !important;
}

.header-section .header-area .dropdown-item {
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  transition: background 0.2s ease !important;
}

.header-section .header-area .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   Game 页面样式优化
   ======================================== */
.header-search {
  margin-left: 191px!important;
}
/* Header Search Styles */
.header-search-input {
  background: rgba(14, 18, 29, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding-left: 16px !important;
  padding-right: 40px !important;
  font-size: 14px !important;
}

.header-search-input::placeholder {
  color: #576081 !important;
}

.header-search-input:focus {
  background: rgba(14, 18, 29, 0.8) !important;
  border-color: rgba(29, 159, 87, 0.5) !important;
  box-shadow: none !important;
}

.header-search-icon {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-game.d-flex {
  gap: 16px !important;
  overflow: hidden !important;
}

/* 游戏分类菜单容器 - 去除原有的边框和背景模糊 */
:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 24px !important;
  border: none !important;
  align-self: stretch !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0::-webkit-scrollbar {
  display: none !important;
}

/* 分类列表项样式 */
:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 .dropdown-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  color: #94A3B8 !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  margin: 4px 0 !important;
  padding: 0 16px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-left: none !important;
}

/* 侧边指示条 (3x16px) */
:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 .dropdown-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 16px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 100px !important;
}

:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 .dropdown-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 .dropdown-item.dropdown-item-active {
  background: linear-gradient(90deg, rgba(29, 159, 87, 0.25) 0%, #1c2438 100%) !important;
  color: #ffffff !important;
  border-left: none !important;
}

:is(#page-game, #page-shop) > .d-flex.flex-column.flex-shrink-0 .dropdown-item.dropdown-item-active::before {
  background-color: #1d9f57 !important;
}

#page-game > .container.mb-5 {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  margin-bottom: 3.2rem !important;
}

/* 搜索栏区域 */
#page-game > .container.mb-5 > .d-flex.d-inline-flex {
  flex-shrink: 0 !important;
  padding: 0 16px 16px 16px !important;
}

/* 游戏网格容器 */
#page-game > .container.mb-5 > .p-4.flex-grow-1.container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 16px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 强制覆盖内联样式 */
#page-game .p-4.flex-grow-1.container[style*="height: 100px"] {
  height: auto !important;
  min-height: 200px !important;
}

/* 搜索框区域 - 深色圆角 */
#page-game .input-group {
  background: #171e2f !important;
  border-radius: 8px !important;
  border: none !important;
  overflow: hidden !important;
  height: 40px !important;
}

#page-game .input-group .form-control {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  height: 40px !important;
}

#page-game .input-group .form-control::placeholder {
  color: #576081 !important;
}

#page-game .input-group .fa-search {
  color: #576081 !important;
}

/* 搜索框移除后保持卡片区域及闪电边框原始位置 */
#page-game > .container.mb-5 > .game-electric-shell {
  margin-top: 56px !important;
}

/* 游戏网格区域 */
#page-game .p-4.flex-grow-1.container {
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(87, 96, 129, 0.3) transparent !important;
}

#page-game .p-4.flex-grow-1.container::-webkit-scrollbar {
  width: 6px !important;
}

#page-game .p-4.flex-grow-1.container::-webkit-scrollbar-track {
  background: transparent !important;
}

#page-game .p-4.flex-grow-1.container::-webkit-scrollbar-thumb {
  background: rgba(87, 96, 129, 0.3) !important;
  border-radius: 3px !important;
}


/* =========================================
   Blue Theme Game Card - Enhanced Layout
   ========================================= */
#page-game .game-item {
  width: 168px;
  height: 240px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  #border: 2px solid rgba(29, 159, 87, 0.3);
  background-color: rgba(14, 18, 29, 0.6);
  will-change: transform;
}

#page-game .game-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 0 20px rgba(29, 159, 87, 0.4), 0 0 40px rgba(29, 159, 87, 0.2);
  border-color: rgba(29, 159, 87, 0.8);
}

#page-game .game-item .game-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-shadow: none !important;
  z-index: 3;
}

#page-game .game-item .game-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  #background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  transition: background 0.4s ease;
  z-index: 1;
}

#page-game .game-item:hover .game-image::before {
  background: rgba(14, 18, 29, 0.65);
}

#page-game .game-item .game-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit !important;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease !important;
  z-index: 0;
}

#page-game .game-item:hover .game-image > img {
  transform: none !important;
}

/* Normal State: Icon + Name */
#page-game .game-item .game-normal-state {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}

#page-game .game-item .game-icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#page-game .game-item:hover .game-icon-wrapper {
  width: 40px;
  height: 40px;
  top: 18%;
  transform: translate(-50%, -50%);
}

#page-game .game-item .game-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#page-game .game-item:hover .game-icon {
  width: 40px;
  height: 40px;
}

#page-game .game-item .game-name-label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-family: "Rubik", sans-serif;
  z-index: 3;
}

#page-game .game-item:hover .game-name-label {
  bottom: 16px;
}

/* 隐藏三角形装饰 */
#page-game .game-item .triggle {
  display: none !important;
}

/* 游戏卡片遮罩层 - hover 时的操作面板 */
#page-game .game-item .overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 12px !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 30px;
}

#page-game .game-item .overlay label {
  display: none !important;
}

/* 游戏操作按钮 */
#page-game .game-item .overlay .btn,
#page-game .game-detail-btn-groups .btn {
  background: rgba(29, 159, 87, 0.15) !important;
  border: 2px solid rgba(29, 159, 87, 0.6) !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

#page-game .game-item .overlay .btn:hover,
#page-game .game-detail-btn-groups .btn:hover {
  background: rgba(29, 159, 87, 0.35) !important;
  border-color: rgba(29, 159, 87, 0.9) !important;
  transform: scale(1.08);
}

#page-game .game-item .overlay .btn i,
#page-game .game-detail-btn-groups .btn i {
  color: #fff !important;
  font-size: 20px !important;
}

#page-game .game-item .overlay .btn-group {
  gap: 24px;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
}

/* 游戏徽章 */
#page-game .game-item .badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
}

#page-game .game-item .badge i.fa-bookmark {
  color: #1d9f57 !important;
}

#page-game .game-item .badge i.fa-heart {
  color: #e74c3c !important;
}

/* ========================================
   右侧面板区域 - 三个独立卡片
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) > .bd-highlight.rounded.p-4.border-block.flex-shrink-0 {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-self: stretch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* 隐藏 Webkit 浏览器的滚动条 */
:is(#page-game, #page-shop, #page-rank, #page-event) > .bd-highlight.rounded.p-4.border-block.flex-shrink-0::-webkit-scrollbar {
  display: none !important;
}

/* 用户信息卡片 - 第一个板块 - 独立背景边框 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info,
:is(#page-game, #page-shop, #page-rank, #page-event) .user-info-card {
  box-sizing: border-box !important;
  gap: 10px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 10px !important;
  height: auto !important;
  min-height: auto !important;
  flex-shrink: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info[style*="height: 100px"] {
  height: auto !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_realtime label,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_bonus_realtime label,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_coin_balance label {
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info i {
  color: #576081 !important;
  width: 20px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .dropdown-item {
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  color: #8b92b0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .dropdown-item:hover {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .dropdown-item.dropdown-item-active {
  background: #171e2f !important;
  color: #ffffff !important;
}

/* 轮播控制按钮 */
:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-prev,
:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-next {
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  opacity: 0.6 !important;
  top: 40% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-prev:hover,
:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-next:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-prev-icon,
:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-control-next-icon {
  width: 12px !important;
  height: 12px !important;
}

/* 新闻轮播 */
:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news {
  border-radius: 12px !important;
  overflow: hidden !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-item img {
  border-radius: 12px !important;
  width: 100% !important;
  max-height: 160px !important;
  object-fit: cover !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-indicators {
  bottom: 12px !important;
  margin: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-indicators li {
  width: 4px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  margin: 0 3px !important;
  transition: all 0.3s ease !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-indicators li.active {
  width: 20px !important;
  background: #ffffff !important;
}

/* ========================================
   Game 页面样式修复 - 用户信息区域
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .col-md-3 {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 8px !important;
  margin-right: 8px !important;
  overflow: visible !important;
}

/* 移除伪元素进度环 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .col-md-3::before,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .col-md-3::after {
  display: none !important;
}

/* 头像完整显示 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .cafe_info_member_logo {
  position: relative !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  border: none;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Shop 轮播内容区域 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel {
  flex: 1 !important;
  min-height: 180px !important;
  height: auto !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel-inner {
  height: auto !important;
  min-height: 180px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel-item {
  height: auto !important;
  min-height: 180px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel-item .d-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  min-height: 180px !important;
}

/* Shop 轮播 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .promotions,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted #game_promotes {
  background: transparent !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted #game_offers {
  background: transparent !important;
}

/* ========================================
   Game 页面 - 用户信息区域布局
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .row.text-white {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

/* 用户详情区域 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .col-md-9 {
  flex: 1 !important;
  max-width: none !important;
  padding: 0 !important;
}

/* 用户名样式 - Welcome back 和用户名在一行 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .text-truncate.font-size-3 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .text-truncate.font-size-3::before {
  content: 'Welcome back, ' !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .name {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 余额、奖金、金币行 - 显示图标 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_realtime,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_bonus_realtime,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_coin_balance {
  display: flex !important;
  align-items: center !important;
  margin-top: 6px !important;
  padding-top: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_realtime i,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_bonus_realtime i,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_coin_balance i {
  color: #576081 !important;
  font-size: 14px !important;
  width: 20px !important;
  margin-right: 8px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_realtime .value,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_balance_bonus_realtime .value,
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .member_coin_balance .value {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 刷新按钮 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .fa-rotate {
  color: #576081 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .fa-rotate:hover {
  color: #ffffff !important;
}

/* 隐藏价格行 */
:is(#page-game, #page-shop, #page-rank, #page-event) #home_member_info .normal-only:has(.fa-barcode) {
  display: none !important;
}

/* ========================================
   VIP 进度条区域
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) #offers_div {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 16px 12px 16px !important;
  box-sizing: border-box !important;
}

/* 隐藏会员等级数字块 */
:is(#page-game, #page-shop, #page-rank, #page-event) #offers_div > .member-group {
  display: none !important;
}

/* VIP 进度条区域 */
:is(#page-game, #page-shop, #page-rank, #page-event) .vip-progress-section {
  width: 100%;
  margin: 8px 0 0 0;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #carousel_offers {
  width: 100%;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #carousel_offers .carousel-inner {
  width: 100%;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #carousel_offers .carousel-item {
  padding: 0;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-info-row {
  margin-bottom: 8px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-label {
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-time {
  color: #ffffff !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-progress-row {
  gap: 8px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-arrow {
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-arrow:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .vip-arrow svg {
  width: 14px !important;
  height: 14px !important;
}

/* 进度条容器 */
:is(#page-game, #page-shop, #page-rank, #page-event) .vip-progress-bar-container {
  flex: 1 !important;
  height: 6px !important;
  background: #333333 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 进度条填充 */
:is(#page-game, #page-shop, #page-rank, #page-event) .vip-progress-bar-container .progress-bar {
  background: linear-gradient(90deg, #1d9f57 0%, #43AE1D 100%) !important;
  border-radius: 7px !important;
  height: 100% !important;
  min-width: 0 !important;
  transition: width 1s linear !important;
}

/* ========================================
   Shop 区域
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted {
  box-sizing: border-box !important;
  position: relative !important;
  background: rgba(14, 18, 29, 0.25) !important;
  border: 1px solid #151a2c !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  min-height: 256px !important;
  height: auto !important;
  overflow: hidden !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted::before {
  display: none !important;
}

/* Shop Tab 样式 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted > .d-flex:first-child {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 10 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted #promotions,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted #offers {
  padding: 8px 12px !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  color: #8b92b0 !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .section-tab:hover {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .section-tab.active {
  background: #171e2f !important;
  color: #ffffff !important;
}

/* ========================================
   游戏卡片徽章样式
   ======================================== */
/* 徽章容器 - 一个黑色背景块 */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item .badge-container,
.game-item .game-image .badge-container {
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  height: 28px !important;
  background: #232631 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  z-index: 4 !important;
  padding: 0 8px !important;
  border-radius: 0px 0px 0px 6px !important;
  transition: all 0.3s ease;
}

/* 没有书签也没有收藏时，隐藏容器 */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item .badge-container:not(.has-license):not(.has-favorite),
.game-item .game-image .badge-container:not(.has-license):not(.has-favorite) {
  background: transparent !important;
  padding: 0 !important;
}

/* hover 时显示容器 */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item:hover .badge-container,
.game-item:hover .game-image .badge-container,
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item:hover .badge-container:not(.has-license):not(.has-favorite),
.game-item:hover .game-image .badge-container:not(.has-license):not(.has-favorite) {
  background: #232631 !important;
  padding: 0 8px !important;
}

/* 图标基础样式 */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item .badge-container i,
.game-item .game-image .badge-container i {
  font-size: 12px !important;
}

/* 书签颜色（绿色） */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item .badge-container .icon-license,
.game-item .game-image .badge-container .icon-license {
  color: #1d9f57 !important;
}

/* 红心颜色 */
:is(#page-game, #page-shop, #page-rank, #page-event) .game-item .badge-container .icon-favorite.text-danger,
.game-item .game-image .badge-container .icon-favorite.text-danger {
  color: #e74c3c !important;
}

/* 未收藏时隐藏空心红心，不占空间 */
.game-image .badge-container .favorite-icon {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* hover 时显示空心红心 */
.game-image:hover .badge-container .favorite-icon {
  width: 12px;
  opacity: 1;
}

.game-image:hover .badge-container .icon-license {
  margin-right: 12px;
}

/* ========================================
   用户信息卡片样式
   ======================================== */
/* .user-info-card {
  box-sizing: border-box;
  padding: 16px;
  gap: 16px;
  width: 100%;
  background: rgba(14, 18, 29, 0.25);
  border: 1px solid #151a2c;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
} */

.user-card-top {
  gap: 16px;
}

/* 用户头像区域 */
.user-avatar {
  position: relative;
  width: 84.18px;
  height: 84.18px;
  flex-shrink: 0;
}

.user-avatar .progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.user-avatar .progress-ring-bg {
  fill: none;
  stroke: rgba(124, 58, 237, 0.2);
  stroke-width: 5;
}

.user-avatar .progress-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.user-avatar img {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar .user-level {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #9186FF 0%, #574AFF 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  border: 2px solid #0e121d;
}

.user-details {
  flex: 1;
  gap: 8px;
}

.user-name {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
}

.user-name span:first-child {
  color: rgba(255, 255, 255, 0.7);
}

.user-stat-group {
  gap: 8px;
}

.user-stat-row {
  gap: 24px;
}

.user-stat-item {
  gap: 8px;
}

.user-stat-item svg,
.user-stat-item i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.user-stat-item span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
}

/* Topup 按钮 */
.user-stat-wallet .btn.btn-topup {
  background: rgba(29, 159, 87, 0.10) !important;
  border: 1px solid #24262E !important;
  border-radius: 4px !important;
  color: #1d9f57 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  margin-left: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  min-width: unset !important;
  height: auto !important;
  box-shadow: none !important;
}

.user-stat-wallet .btn.btn-topup .btn-topup-plus {
  font-size: 14px;
  font-weight: 700;
  color: #1d9f57;
  line-height: 1;
}

.user-stat-wallet .btn.btn-topup:hover {
  background: rgba(29, 159, 87, 0.18) !important;
  border-color: #2a2e38 !important;
}

.user-stat-wallet .btn.btn-topup:hover .btn-topup-plus {
  color: #25c96e;
}

/* 余额行 - 全宽深色背景条 */
.user-info-card > .user-stat-wallet {
  width: 100% !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
}

.user-price-info {
  gap: 4px;
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  color: #576081;
}


/* ========================================
   右侧边栏样式修复
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) .px-0.flex-shrink-1.mt-3 {
  display: block !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .px-0.flex-shrink-1.mt-3 > .bd-highlight.home-news {
  box-sizing: border-box !important;
  background: rgba(14, 18, 29, 0.25) !important;
  border: 1px solid #151a2c !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

/* 移除内部 news/rank 容器的背景边框 */
:is(#page-game, #page-shop, #page-rank, #page-event) .px-0.flex-shrink-1.mt-3 .news.bd-highlight,
:is(#page-game, #page-shop, #page-rank, #page-event) .px-0.flex-shrink-1.mt-3 .rank.bd-highlight,
:is(#page-game, #page-shop, #page-rank, #page-event) .rank.bd-highlight,
:is(#page-game, #page-shop, #page-rank, #page-event) .news.bd-highlight {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rank 列表样式 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div {
  padding: 0 !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 隐藏 Rank 标题和表头 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div h4,
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:first-child {
  display: none !important;
}

/* Rank 列表容器 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 12px !important;
  aspect-ratio: 4 / 3 !important;
  overflow-y: auto !important;
}

/* Rank 行样式 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border-radius: 8px !important;
  transition: background 0.3s ease !important;
  height: 28px !important;
  padding: 0 12px !important;
  margin-bottom: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child):hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4 {
  padding: 0 !important;
}

/* Rank 数字 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:first-child {
  text-align: left !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 24px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:first-child label {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* 玩家名称 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:nth-child(2) {
  text-align: left !important;
  flex: 1 !important;
  margin-left: 16px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:nth-child(2) label {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

/* 分数 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:last-child {
  text-align: right !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 60px !important;
  padding-right: 24px !important;
  position: relative !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:last-child label {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* 奖杯图标 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:not(:first-child) .col-4:last-child::after {
  content: '';
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33333 6.5V3.33333H1.66667V4.16667C1.66667 4.69444 1.81944 5.17014 2.125 5.59375C2.43056 6.01736 2.83333 6.31944 3.33333 6.5ZM11.6667 6.5C12.1667 6.31944 12.5694 6.01736 12.875 5.59375C13.1806 5.17014 13.3333 4.69444 13.3333 4.16667V3.33333H11.6667V6.5ZM6.66667 13.3333V10.75C5.98611 10.5972 5.37847 10.309 4.84375 9.88542C4.30903 9.46181 3.91667 8.93056 3.66667 8.29167C2.625 8.16667 1.75347 7.71181 1.05208 6.92708C0.350694 6.14236 0 5.22222 0 4.16667V3.33333C0 2.875 0.163194 2.48264 0.489583 2.15625C0.815972 1.82986 1.20833 1.66667 1.66667 1.66667H3.33333C3.33333 1.20833 3.49653 0.815972 3.82292 0.489583C4.14931 0.163194 4.54167 0 5 0H10C10.4583 0 10.8507 0.163194 11.1771 0.489583C11.5035 0.815972 11.6667 1.20833 11.6667 1.66667H13.3333C13.7917 1.66667 14.184 1.82986 14.5104 2.15625C14.8368 2.48264 15 2.875 15 3.33333V4.16667C15 5.22222 14.6493 6.14236 13.9479 6.92708C13.2465 7.71181 12.375 8.16667 11.3333 8.29167C11.0833 8.93056 10.691 9.46181 10.1562 9.88542C9.62153 10.309 9.01389 10.5972 8.33333 10.75V13.3333H10.8333C11.0694 13.3333 11.2674 13.4132 11.4271 13.5729C11.5868 13.7326 11.6667 13.9306 11.6667 14.1667C11.6667 14.4028 11.5868 14.6007 11.4271 14.7604C11.2674 14.9201 11.0694 15 10.8333 15H4.16667C3.93056 15 3.73264 14.9201 3.57292 14.7604C3.41319 14.6007 3.33333 14.4028 3.33333 14.1667C3.33333 13.9306 3.41319 13.7326 3.57292 13.5729C3.73264 13.4132 3.93056 13.3333 4.16667 13.3333H6.66667Z' fill='%23576081'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* 前三名特殊样式 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(2) {
  background: linear-gradient(90deg, rgba(56, 50, 36, 0.6) 0%, transparent 50%) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(2) .col-4:first-child label {
  color: #ffd773 !important;
  font-weight: 600 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(3) {
  background: linear-gradient(90deg, rgba(47, 50, 61, 0.6) 0%, transparent 50%) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(3) .col-4:first-child label {
  color: #c2c8d9 !important;
  font-weight: 600 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(4) {
  background: linear-gradient(90deg, rgba(50, 40, 33, 0.6) 0%, transparent 50%) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank > .d-flex:nth-child(4) .col-4:first-child label {
  color: #e89b6a !important;
  font-weight: 600 !important;
}

/* 当前用户高亮 */
:is(#page-game, #page-shop, #page-rank, #page-event) .ranking-div #home_rank .text-warning {
  color: #f1c40f !important;
}

/* Shop 商品卡片 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 110px !important;
  height: auto !important;
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
  margin: 4px !important;
  position: relative !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item:hover {
  transform: translateY(-2px) !important;
}

/* 图片区域 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item .game-image {
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 图片样式 - 有内边距，不放大 */
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item .game-image img {
  width: 108px !important;
  height: 108px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  padding: 2px 2px 0 2px !important;
  flex-shrink: 0 !important;
  transition: none !important;
  transform: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item:hover .game-image img {
  transform: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay,
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay[style],
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .game-image .overlay,
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .game-image .overlay[style],
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay[style] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  padding: 0 4px 1px 10px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .game-item:hover .overlay,
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item:hover .overlay {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  background: transparent !important;
}

/* 商品信息容器 */
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay p,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay p {
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* 商品名称 */
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay p > label:first-child,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay p > label:first-child,
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay label:first-of-type,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay label:first-of-type {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  line-height: 14px !important;
  padding: 0 !important;
}

/* 商品价格 */
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay .font-weight-bold,
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay label.font-weight-bold,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay .font-weight-bold,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay label.font-weight-bold {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1d9f57 !important;
  display: block !important;
  margin: 0 !important;
  line-height: 16px !important;
  padding: 0 !important;
}

/* 隐藏购物车按钮 - 点击整个卡片购买 */
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay .btn-group,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay .btn-group {
  display: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.home-promoted .game-item .overlay .btn,
:is(#page-game, #page-shop, #page-rank, #page-event) .home-promoted .carousel .game-item .overlay .btn {
  display: none !important;
}

/* ========================================
   Rank/News 区域
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) .bd-highlight.rounded.p-4 .sidebar-section.rank-section,
:is(#page-game, #page-shop, #page-rank, #page-event) > div > div > .sidebar-section.rank-section,
:is(#page-game, #page-shop, #page-rank, #page-event) .sidebar-section.rank-section {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #151a2c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 10px 10px 12px 10px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  width: 100% !important;
  flex-grow: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-header {
  width: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-tabs {
  position: relative !important;
  z-index: 20 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-tabs {
  gap: 8px !important;
  border: none !important;
  margin-bottom: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-tabs .section-tab {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #8b92b0 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-tabs .section-tab.active {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-tabs .section-tab:not(.active):hover {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-list {
  display: none !important;
  gap: 4px !important;
  width: 100% !important;
  overflow-y: auto !important;
  height: 200px !important;
  min-height: 200px !important;
  border-radius: 0 !important;
  padding: 12px !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-list.active {
  display: flex !important;
  flex-direction: column !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-list .no-rank-message {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 176px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-content .no-news-message {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 200px !important;
  min-height: 200px !important;
  border-radius: 12px !important;
  border: 1px solid #232631 !important;
  background: rgba(14, 18, 29, 0.25) !important;
  box-sizing: border-box !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-item {
  background: transparent !important;
  border-radius: 8px !important;
  transition: background 0.3s ease !important;
  height: 28px !important;
  padding: 0 12px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-item.rank-me {
  background: rgba(172, 158, 149, 0.6) !important;
  border-radius: 8px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-number {
  width: auto !important;
  min-width: 24px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  text-align: left !important;
  flex-shrink: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-name {
  flex: 1 !important;
  margin-left: 16px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-score {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  margin-right: 8px !important;
  text-align: right !important;
  min-width: 60px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .rank-item svg {
  color: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel {
  width: 100% !important;
}

/* News 内容区域 - 确保不遮挡 tab */
:is(#page-game, #page-shop, #page-rank, #page-event) .news-content {
  display: none !important;
  position: relative !important;
  z-index: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-content.active {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel-wrapper {
  position: relative !important;
  z-index: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-arrow {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  opacity: 0.5 !important;
  padding: 0 !important;
  outline: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-arrow:hover {
  opacity: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-arrow svg {
  width: 18px !important;
  height: 18px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel-container,
:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news {
  width: 100% !important;
  height: 200px !important;
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .carousel-spotlight:not(.owl-carousel-spotlight),
:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news.carousel-spotlight {
  margin-bottom: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-inner,
:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel-inner {
  width: 100% !important;
  height: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) #game_carousel_news .carousel-item,
:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel-item {
  width: 100% !important;
  height: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-video-wrapper,
:is(#page-game, #page-shop, #page-rank, #page-event) .news-video-box {
  width: 100% !important;
  height: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-local-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
  border-radius: 0 0 12px 12px !important;
  pointer-events: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-content-wrapper {
  position: absolute !important;
  bottom: 8px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-item-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-indicators,
:is(#page-game, #page-shop, #page-rank, #page-event) .rank-section .news-indicators,
:is(#page-game, #page-shop, #page-rank, #page-event) .sidebar-section .news-indicators,
:is(#page-game, #page-shop, #page-rank, #page-event) .news-carousel .news-indicators {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-indicators .indicator {
  width: 4px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: width 0.3s ease, background 0.3s ease !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .news-indicators .indicator.active {
  width: 23px !important;
  background: #ffffff !important;
}

/* ========================================
   Shop Section
   ======================================== */
:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section {
  min-height: 256px !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border-top: 1px solid #151a2c !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section .section-header {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  height: 31px !important;
  order: -1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-tabs {
  margin-left: 8px !important;
  gap: 8px !important;
  height: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-tabs .section-tab {
  color: #8b92b0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 6px 10px !important;
  background: transparent !important;
  border-radius: 20px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-tabs .section-tab:hover {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-tabs .section-tab.active {
  color: #ffffff !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-carousel-wrapper {
  position: relative !important;
  margin-top: 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/* 确保 d-none 类能正确隐藏 shop-carousel-wrapper */
:is(#page-game, #page-shop, #page-rank, #page-event) .shop-carousel-wrapper.d-none {
  display: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  opacity: 0.5 !important;
  padding: 0 !important;
  outline: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow:hover {
  opacity: 1 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow:focus,
:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow:active {
  outline: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow svg {
  width: 18px !important;
  height: 18px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow-left {
  margin-left: 0 !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow-right {
  margin-right: 0 !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-arrow-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-items {
  padding: 0px !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  justify-content: flex-start !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .no-shop-message {
  flex: none !important;
  order: 1 !important;
  width: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 2px 2px 8px 2px !important;
  gap: 8px !important;
  width: 100px !important;
  height: 155px !important;
  background: #232631 !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 12px !important;
  flex: 0 0 100px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, background 0.3s ease !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item:hover {
  transform: translateY(-2px) !important;
  background: #2a2d3a !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item img {
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  padding: 2px 2px 0px 2px !important;
  height: 96px !important;
  width: 96px !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item-info {
  padding: 0px 4px 1px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  flex: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item-name {
  font-family: "Inter", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 14px !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-item-price {
  font-family: "Inter", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 16px !important;
  color: #1d9f57 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Shop Section Carousel Indicators */
:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section .carousel-indicators {
  position: static !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
  gap: 6px !important;
  width: 100% !important;
  height: 4px !important;
  flex: none !important;
  order: 2 !important;
  flex-grow: 0 !important;
  margin: 20px auto 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section .indicator {
  width: 4px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: width 0.3s ease, background 0.3s ease !important;
  flex: none !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section .indicator:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

:is(#page-game, #page-shop, #page-rank, #page-event) .shop-section .indicator.active {
  width: 23.22px !important;
  background: #ffffff !important;
}


/* ========================================
   Shop 支付方式样式
   ======================================== */
.shop-payment-methods {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.shop-payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  #padding: 16px 8px;
  #flex: 1;
  background: rgba(23, 30, 47, 0.5);
  border: 1px solid rgba(87, 96, 129, 0.25);
  border-radius: 12px;
  min-height: 84px;
  width: 100px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.shop-payment-method.active {
  border: 1.5px solid transparent;
}

/* 绿色支付方式选中状态 (Cash, Credit Card, Pay Later) */
.shop-payment-method.payment-green.active {
  background: rgba(29, 159, 87, 0.12);
  border-color: #1D9F57;
}
.shop-payment-method.payment-green.active .shop-payment-label {
  color: #1D9F57;
}

/* 蓝色支付方式选中状态 (Balance) */
.shop-payment-method.payment-blue.active {
  background: rgba(46, 126, 193, 0.12);
  border-color: #2E7EC1;
}
.shop-payment-method.payment-blue.active .shop-payment-label {
  color: #2E7EC1;
}

/* 未选中状态：所有 SVG 图标统一为白色 */
.shop-payment-method:not(.active) svg path,
.shop-payment-method:not(.active) svg rect,
.shop-payment-method:not(.active) svg circle {
  stroke: #ffffff !important;
}

.shop-payment-method:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.3);
}

.shop-payment-method svg {
  width: 24px;
  height: 24px;
}

.shop-payment-label {
  width: 72.45px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.185em;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* ========================================
   Checkout Modal 样式
   ======================================== */
.myModalBuy .modal-dialog {
  max-width: 480px !important;
}

.checkout-items-count {
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  color: #576081;
}

.checkout-clear-all {
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  color: #ffc107;
  text-decoration: none;
  cursor: pointer;
}

.checkout-clear-all:hover {
  color: #e0a800;
  text-decoration: none;
}

.checkout-product-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

.checkout-product-list::-webkit-scrollbar {
  width: 4px;
}

.checkout-product-list::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.checkout-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(23, 30, 47, 0.5);
  border: 1px solid rgba(87, 96, 129, 0.2);
  border-radius: 10px;
}

.checkout-product-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.checkout-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-product-info {
  flex: 1;
  min-width: 0;
}

.checkout-product-name {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.checkout-product-price {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #28a745;
}

.checkout-product-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.checkout-qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(87, 96, 129, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 12px;
  text-decoration: none !important;
}

.checkout-qty-btn:hover {
  background: rgba(87, 96, 129, 0.5);
}

.checkout-qty-btn:focus,
.checkout-qty-btn:active {
  outline: none;
  text-decoration: none !important;
}

.checkout-qty-value {
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  min-width: 24px;
  text-align: center;
}

.checkout-summary {
  padding: 16px 0;
  margin-bottom: 16px;
  border-top: 1px solid rgba(87, 96, 129, 0.2);
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  color: #576081;
}

.checkout-summary-total {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding-top: 8px;
}

/* ========================================
   Shop 页面样式
   ======================================== */
#page-shop.d-flex {
  gap: 16px !important;
  overflow: hidden !important;
}

/* 左侧分类菜单 */
#page-shop .shop-category-menu {
  background: rgba(14, 18, 29, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  border: 1px solid #151a2c !important;
  height: fit-content !important;
  max-height: calc(100% - 32px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#page-shop .shop-category-menu::-webkit-scrollbar {
  display: none !important;
}

#page-shop .shop-category-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  color: #576081 !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  margin: 4px 0 !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#page-shop .shop-category-menu .dropdown-item:hover {
  color: #ffffff !important;
}

#page-shop .shop-category-menu .dropdown-item.dropdown-item-active {
  background: #171e2f !important;
  color: #ffffff !important;
}

/* 中间主内容区域 - 与 game 页面一致 */
#page-shop > .container.mb-5 {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 搜索栏区域 */
#page-shop > .container.mb-5 > .d-flex.d-inline-flex {
  flex-shrink: 0 !important;
  padding: 0 16px 16px 16px !important;
}

#page-shop .input-group {
  background: #171e2f !important;
  border-radius: 8px !important;
  border: none !important;
  overflow: hidden !important;
  height: 40px !important;
  max-width: 300px !important;
}

#page-shop .input-group .form-control {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  height: 40px !important;
}

#page-shop .input-group .form-control::placeholder {
  color: #576081 !important;
}

#page-shop .input-group .fa-search {
  color: #576081 !important;
}

/* 商品网格容器 - 与 game 页面一致 */
#page-shop > .container.mb-5 > .p-4.flex-grow-1.container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 16px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 强制覆盖内联样式 */
#page-shop .p-4.flex-grow-1.container[style*="height: 100px"] {
  height: auto !important;
  min-height: 200px !important;
}

/* 商品网格区域 - 与 game 页面一致 */
#page-shop .p-4.flex-grow-1.container {
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(87, 96, 129, 0.3) transparent !important;
}

/* 商品网格区域 */
#page-shop #product-list {
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}

#page-shop .p-4.flex-grow-1.container::-webkit-scrollbar {
  width: 6px !important;
}

#page-shop .p-4.flex-grow-1.container::-webkit-scrollbar-track {
  background: transparent !important;
}

#page-shop .p-4.flex-grow-1.container::-webkit-scrollbar-thumb {
  background: rgba(87, 96, 129, 0.3) !important;
  border-radius: 3px !important;
}

/* 商品卡片容器 */
#page-shop #product-list > .p-4 {
  padding: 4px 4px 12px !important;
  margin: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 146px !important;
  background: #232631 !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#page-shop #product-list > .p-4:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 商品图片容器 */
.shop-item-wrapper {
  width: 170px !important;
  max-width: 170px !important;
}

.shop-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Shop Image Container */
.shop-image {
  width: 100% !important;
  height: 138px !important;
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.shop-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
  border-radius: 12px !important;
}

/* Hover Effect: Zoom Image */
.shop-card:hover .shop-image > img {
  transform: scale(1.05) !important;
}

/* Hover Overlay */
.hover-overlay {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  background: rgba(0, 0, 0, 0.4) !important; /* Darker dim */
  cursor: pointer !important;
  display: flex !important; /* Force flex display */
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 5 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 12px !important;
}

.shop-card:hover .hover-overlay {
  opacity: 1 !important;
}

/* Ensure hover overlay shows on shop-image hover too */
.shop-image:hover .hover-overlay {
  opacity: 1 !important;
}

/* Active Overlay (Qty Control) - 全覆盖，底部显示绿色条 */
.active-overlay {
  z-index: 10 !important;
  top: 0 !important;
  left: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.active-overlay-bar {
  background: #28a745 !important;
  height: 40px !important;
}

/* 父容器 overflow:hidden 自动裁剪圆角 */
.shop-image.in-cart .active-overlay {
  border-radius: 0 !important;
}

.active-overlay-bar button {
  width: 30px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.active-overlay-bar button:hover,
.active-overlay-bar button:focus,
.active-overlay-bar button:active {
  text-decoration: none !important;
}

.active-overlay-bar button i {
  font-size: 14px !important;
  text-decoration: none !important;
}

.active-overlay-bar span {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.shop-image {
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

.shop-image.in-cart::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid #28a745 !important;
  border-radius: 12px !important;
  pointer-events: none !important;
  z-index: 15 !important;
}

/* Info Section */
.shop-info {
  padding: 4px 0 0 0 !important;
}

.shop-name {
  font-family: "Rubik", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

.shop-price {
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #28a745 !important;
  margin-top: 4px !important;
}

#page-shop .adult-only {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 10 !important;
  background: rgba(0,0,0,0.5) !important;
  border-radius: 4px !important;
  padding: 2px !important;
}

#page-shop #product-list > .p-4 > label {
  display: none !important;
}

/* 右侧购物车区域 */
#page-shop .container.d-inline-block.align-top.h-100.flex-shrink-0.px-0.pt-4 {
  display: flex !important;
  flex-direction: column !important;
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  padding: 0 !important;
  gap: 20px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

#page-shop .container.d-inline-block.align-top.h-100.flex-shrink-0.px-0.pt-4::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* 购物车卡片 */
#page-shop #shop_cart,
#page-shop #shop_cart_gift {
  width: 100% !important;
}

#page-shop #shop_cart .bd-highlight,
#page-shop #shop_cart_gift .bd-highlight {
  background: rgba(14, 18, 29, 0.95) !important;
  border: 1px solid #151a2c !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

/* 购物车标题 */
#page-shop #shop_cart .text-light.lang.font-size-5,
#page-shop #shop_cart_gift .text-light.lang.font-size-5 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* 购物车表格 */
#page-shop .table.cart {
  background: transparent !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

#page-shop .table.cart tbody tr {
  background: rgba(23, 30, 47, 0.8) !important;
  border-radius: 12px !important;
  transition: background 0.2s ease !important;
}

#page-shop .table.cart tbody tr:hover {
  background: rgba(23, 30, 47, 0.95) !important;
}

#page-shop .table.cart tbody td {
  border: none !important;
  padding: 12px 8px !important;
  vertical-align: middle !important;
}

#page-shop .table.cart tbody td:first-child {
  border-radius: 12px 0 0 12px !important;
}

#page-shop .table.cart tbody td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

#page-shop .table.cart tbody td label {
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  margin: 0 !important;
}

#page-shop .table.cart tfoot td {
  border: none !important;
  padding: 8px !important;
}

#page-shop .table.cart tfoot label {
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  color: #576081 !important;
}

#page-shop .table.cart tfoot tr:last-child label {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* 数量输入框 */
#page-shop .new-order-item-qty,
#page-shop .new-order-item-gift-qty {
  background: rgba(14, 18, 29, 0.5) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  width: 60px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/* 删除按钮 */
#page-shop .table.cart .fa-trash-can {
  color: #576081 !important;
  transition: color 0.3s ease !important;
}

#page-shop .table.cart .fa-trash-can:hover {
  color: #e38617 !important;
}

/* 购物车底部按钮 */
#page-shop .btn-group.mb-5.w-100 {
  display: flex !important;
  gap: 12px !important;
}

/* 支付方式区域 */
#page-shop #payment-table {
  margin-bottom: 20px !important;
}

#page-shop #payment-table .col-12 {
  padding: 0 !important;
}

#page-shop #payment-table .d-flex.justify-content-around {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

#page-shop #payment-table .custom-control.custom-radio {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(23, 30, 47, 0.5) !important;
  border: 1px solid rgba(87, 96, 129, 0.25) !important;
  border-radius: 12px !important;
  min-height: 84px !important;
  padding: 12px 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#page-shop #payment-table .custom-control.custom-radio:hover {
  border-color: rgba(87, 96, 129, 0.4) !important;
}

#page-shop #payment-table .custom-control-input:checked + .custom-control-label {
  color: #1d9f57 !important;
}

#page-shop #payment-table .custom-control-input:checked + .custom-control-label i {
  color: #1d9f57 !important;
}

#page-shop #payment-table .custom-control-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-family: "Rubik", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

#page-shop #payment-table .custom-control-label::before,
#page-shop #payment-table .custom-control-label::after {
  display: none !important;
}

/* 支付方式 SVG 图标样式 */
#page-shop #payment-table .custom-control-label .payment-icon {
  width: 24px !important;
  height: 24px !important;
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

#page-shop #payment-table .custom-control-label .payment-label {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #ffffff !important;
  margin-top: 8px !important;
  transition: color 0.3s ease !important;
}

/* 选中状态 */
#page-shop #payment-table .custom-control-input:checked + .custom-control-label .payment-icon {
  color: #1d9f57 !important;
}

#page-shop #payment-table .custom-control-input:checked + .custom-control-label .payment-label {
  color: #1d9f57 !important;
}

/* 兼容旧的 FontAwesome 图标 */
#page-shop #payment-table .custom-control-label i {
  font-size: 24px !important;
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

/* ========================================
   Shop 右侧购物车区域 - 与 game 页面一致
   ======================================== */
#page-shop > .bd-highlight.rounded.p-4.border-block.flex-shrink-0,
#page-shop .shop-right-sidebar {
  width: 400px !important;
  min-width: 400px !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 0 !important;
  gap: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#page-shop > .bd-highlight.rounded.p-4.border-block.flex-shrink-0::-webkit-scrollbar,
#page-shop .shop-right-sidebar::-webkit-scrollbar {
  display: none !important;
}

#page-shop .shop-balance-card {
  gap: 16px !important;
  padding: 24px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

#page-shop .shop-balance-title {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.185em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

#page-shop .shop-balance-amount {
  gap: 8px !important;
}

#page-shop .shop-balance-amount svg {
  width: 20px !important;
  height: 20px !important;
}

#page-shop .shop-balance-amount span {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.185em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

#page-shop .shop-balance-coins {
  gap: 40px !important;
}

#page-shop .shop-coin-item {
  gap: 8px !important;
}

#page-shop .shop-coin-item svg {
  width: 18px !important;
  height: 18px !important;
}

#page-shop .shop-coin-item span {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.185em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* Cart 卡片 */
#page-shop .shop-cart-card {
  gap: 16px !important;
  padding: 24px !important;
  background: rgba(14, 18, 29, 0.95) !important;
  border: 1px solid #151a2c !important;
  border-radius: 12px !important;
}

#page-shop #shop_cart .shop-cart-card.bd-highlight.border-block,
#page-shop #shop_cart_gift .bd-highlight.border-block {
  background: rgba(14, 18, 29, 0.95) !important;
  border: 1px solid #151a2c !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Cart 标题 */
#page-shop .shop-cart-card .text-light.lang.font-size-5 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Summary 卡片样式 - Total 区域 */
#page-shop .table.cart tfoot {
  background: transparent !important;
}

#page-shop .table.cart tfoot td {
  border: none !important;
  padding: 8px 0 !important;
}

#page-shop .table.cart tfoot label {
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  color: #576081 !important;
  margin: 0 !important;
}

#page-shop .table.cart tfoot tr:last-child td {
  padding-top: 12px !important;
  border-top: 1px solid rgba(87, 96, 129, 0.2) !important;
}

#page-shop .table.cart tfoot tr:last-child label {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* 支付方式选中状态背景 */
#page-shop #payment-table .custom-control.custom-radio {
  background: rgba(23, 30, 47, 0.5) !important;
  border: 1px solid rgba(87, 96, 129, 0.25) !important;
  border-radius: 12px !important;
  min-height: 84px !important;
  padding: 12px 8px !important;
  transition: all 0.3s ease !important;
}

#page-shop #payment-table .custom-control-input:checked ~ .custom-control-label {
  color: #1d9f57 !important;
}

/* 选中的支付方式卡片背景 */
#page-shop #payment-table .custom-control.custom-radio:has(.custom-control-input:checked) {
  background: rgba(12, 194, 93, 0.1) !important;
  border-color: transparent !important;
}

/* ========================================
   Cart 购物车项目 - 卡片式布局
   ======================================== */
#page-shop .table.cart thead {
  display: none !important;
}

/* 购物车项目行 */
#page-shop .table.cart tbody tr {
  display: flex !important;
  gap: 16px !important;
  padding: 8px !important;
  background: rgba(23, 30, 47, 0.8) !important;
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  transition: background 0.2s ease !important;
  align-items: center !important;
}

#page-shop .table.cart tbody tr:hover {
  background: rgba(23, 30, 47, 0.95) !important;
}

/* 空行隐藏 */
#page-shop .table.cart tbody tr:has(td[colspan]) {
  display: none !important;
}

/* 删除按钮列 */
#page-shop .table.cart tbody td.feedback-icon {
  width: auto !important;
  padding: 0 !important;
  order: 4 !important;
}

#page-shop .table.cart tbody td.feedback-icon .fa-trash-can {
  font-size: 16px !important;
  color: #576081 !important;
}

#page-shop .table.cart tbody td.feedback-icon .fa-trash-can:hover {
  color: #e38617 !important;
}

/* 商品信息列 */
#page-shop .table.cart tbody td.text-left {
  flex: 1 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#page-shop .table.cart tbody td.text-left label.text-white {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.25em !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 150px !important;
}

#page-shop .table.cart tbody td.text-left label:not(.text-white) {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #1d9f57 !important;
  margin: 0 !important;
}

/* 数量控制列 */
#page-shop .table.cart tbody td:has(.new-order-item-qty) {
  padding: 0 !important;
  width: auto !important;
}

#page-shop .table.cart tbody .new-order-item-qty {
  width: 50px !important;
  height: 30px !important;
  background: rgba(14, 18, 29, 0.5) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 0 8px !important;
}

/* 小计列 */
#page-shop .table.cart tbody td.text-right {
  padding: 0 !important;
  width: auto !important;
}

#page-shop .table.cart tbody td.text-right label {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* ========================================
   Summary 区域 - Subtotal/Total
   ======================================== */
#page-shop .table.cart tfoot {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 0 !important;
  margin-top: 16px !important;
  border-top: 1px solid rgba(87, 96, 129, 0.2) !important;
}

#page-shop .table.cart tfoot tr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 0 !important;
  background: transparent !important;
}

#page-shop .table.cart tfoot td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#page-shop .table.cart tfoot td.text-left {
  flex: 1 !important;
}

#page-shop .table.cart tfoot td.text-right {
  text-align: right !important;
}

#page-shop .table.cart tfoot label {
  font-family: "Rubik", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #576081 !important;
  margin: 0 !important;
}

/* Total 行特殊样式 */
#page-shop .table.cart tfoot tr:last-child {
  padding-top: 12px !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(87, 96, 129, 0.2) !important;
}

#page-shop .table.cart tfoot tr:last-child label {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* ========================================
   支付方式区域优化
   ======================================== */
#page-shop #payment-table {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

#page-shop #payment-table .d-flex.justify-content-around {
  display: flex !important;
  gap: 8px !important;
  justify-content: stretch !important;
}

#page-shop #payment-table .custom-control.custom-radio {
  flex: 1 !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(23, 30, 47, 0.5) !important;
  border: 1px solid rgba(87, 96, 129, 0.25) !important;
  border-radius: 12px !important;
  min-height: 84px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#page-shop #payment-table .custom-control.custom-radio:hover {
  border-color: rgba(87, 96, 129, 0.4) !important;
  background: rgba(23, 30, 47, 0.7) !important;
}

/* 隐藏原生 radio 按钮 */
#page-shop #payment-table .custom-control-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#page-shop #payment-table .custom-control-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
}

#page-shop #payment-table .custom-control-label::before,
#page-shop #payment-table .custom-control-label::after {
  display: none !important;
}

#page-shop #payment-table .payment-icon {
  width: 24px !important;
  height: 24px !important;
  color: #ffffff !important;
}

#page-shop #payment-table .payment-label {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #ffffff !important;
  text-align: center !important;
}

/* 选中状态 */
#page-shop #payment-table .custom-control-input:checked + .custom-control-label .payment-icon,
#page-shop #payment-table .custom-control-input:checked + .custom-control-label .payment-label {
  color: #1d9f57 !important;
}

/* ========================================
   Checkout 按钮
   ======================================== */
#page-shop .btn-group.mb-5.w-100 {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

#page-shop .btn-group.mb-5.w-100 .client-btn-close {
  flex: 0 0 60px !important;
  width: 60px !important;
  background: rgba(87, 96, 129, 0.2) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 12px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page-shop .btn-group.mb-5.w-100 .client-btn-close:hover {
  background: rgba(87, 96, 129, 0.3) !important;
}

#page-shop .btn-group.mb-5.w-100 .client-btn-success {
  flex: 1 !important;
  background: #1d9f57 !important;
  border: none !important;
  border-radius: 12px !important;
  height: 50px !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
}

#page-shop .btn-group.mb-5.w-100 .client-btn-success:hover:not(:disabled) {
  background: #1baf5e !important;
}

#page-shop .btn-group.mb-5.w-100 .client-btn-success:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ========================================
   Shop Cart Items
   ======================================== */
.shop-cart-card {
  gap: 16px;
  padding: 24px;
  background: rgba(14, 18, 29, 0.95);
  border: 1px solid #151a2c;
  border-radius: 12px;
  margin-bottom: 20px;
}

.shop-cart-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.185em;
  color: #ffffff;
  margin: 0;
}

.shop-cart-meta {
  gap: 16px;
}

.shop-cart-count {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #576081;
}

.shop-cart-clear {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #e38617;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.shop-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.shop-cart-empty svg {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}

.shop-cart-empty-text {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  margin: 0;
}

.shop-cart-empty-subtitle {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081;
  margin: 0;
}

.shop-cart-items {
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.shop-cart-item {
  gap: 16px;
  padding: 8px;
  background: rgba(23, 30, 47, 0.8);
  border-radius: 12px;
  transition: background 0.2s ease;
}

.shop-cart-item:hover {
  background: rgba(23, 30, 47, 0.95);
}

.shop-cart-item-image {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.shop-cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.shop-cart-item-name {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25em;
  color: #ffffff;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-cart-item-bottom {
  gap: 8px;
}

.shop-cart-item-price {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #1d9f57;
  margin: 0;
}

.shop-cart-qty-control {
  gap: 10px;
  padding: 3px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 50px;
}

.shop-cart-qty-btn {
  padding: 5px;
  width: 24px;
  height: 24px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 50px;
  border: none;
  cursor: pointer;
}

.shop-cart-qty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shop-cart-qty {
  width: 30px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
  -moz-appearance: textfield;
}

.shop-cart-qty::-webkit-outer-spin-button,
.shop-cart-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-summary-card {
  gap: 16px;
  padding: 24px;
  background: rgba(14, 18, 29, 0.95);
  border: 1px solid #151a2c;
  border-radius: 12px;
}

.shop-summary-row {
  gap: 16px;
}

.shop-summary-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081;
  margin: 0;
}

.shop-summary-value {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #576081;
  margin: 0;
}

.shop-summary-row.total .shop-summary-label,
.shop-summary-row.total .shop-summary-value {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
}

.shop-checkout-btn {
  gap: 8px;
  padding: 14px 24px;
  background: #1d9f57;
  border: none;
  border-radius: 12px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.shop-checkout-btn:hover:not(:disabled) {
  background: #1baf5e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(29, 159, 87, 0.25);
}

.shop-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.shop-checkout-entry-btn {
  background: #28a745;
  transition: all 0.3s ease;
}

.shop-checkout-entry-btn:hover:not(:disabled) {
  background: #24963d;
}

.shop-checkout-entry-btn:disabled {
  background: #28a745;
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ========================================
   Shop Balance Card
   ======================================== */
.shop-balance-card {
  gap: 16px;
  padding: 24px;
  background: rgba(14, 18, 29, 0.95);
  border: 1px solid #151a2c;
  border-radius: 12px;
}

.shop-balance-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.185em;
  color: #ffffff;
  margin: 0;
}

.shop-balance-amount {
  gap: 8px;
}

.shop-balance-amount svg {
  width: 20px;
  height: 20px;
}

.shop-balance-amount span {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.185em;
  text-transform: uppercase;
  color: #ffffff;
}

.shop-balance-coins {
  gap: 40px;
}

.shop-coin-item {
  gap: 8px;
}

.shop-coin-item svg {
  width: 18px;
  height: 18px;
}

.shop-coin-item span {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.185em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ========================================
   隐藏旧的支付方式和按钮，使用新样式
   ======================================== */
#page-shop .shop-summary-card #payment-table {
  display: none !important;
}

#page-shop .shop-summary-card .btn-group.mb-5.w-100 {
  display: none !important;
}

#page-shop .shop-summary-card form#cart_form {
  display: contents;
}

#page-shop .shop-summary-card input[type="hidden"] {
  display: none;
}

/* ========================================
   Event 页面样式
   ======================================== */
.events-content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.events-title {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.185em;
  color: #ffffff;
}

.events-list-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.events-list {
  gap: 20px;
}

.event-card {
  gap: 16px;
  padding: 16px;
  width: 446.67px;
  flex-shrink: 0;
  background: rgba(14, 18, 29, 0.25);
  border: 1px solid #232631;
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.event-card-image {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.event-card-image .icon {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}

.event-card-content {
  flex: 1;
  gap: 16px;
  min-width: 0;
}

.event-card-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.185em;
  color: #ffffff;
  margin: 0;
}

.event-card-details {
  gap: 12px;
}

.event-time-wrapper {
  gap: 8px;
}

.event-time {
  gap: 10px;
  padding: 4px 10px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 6px;
}

.event-status {
  gap: 8px;
  padding: 4px 8px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.185em;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: 6px;
}

.event-status-end {
  background: #ff3347;
}

.event-status-going {
  background: #00b956;
}

.event-info-row {
  gap: 8px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  color: #ffffff;
}

.event-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.event-info-row span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-decoration {
  display: none;
}

/* 游戏图标背景 */
.event-card.event-dota2 .event-card-image .icon {
  background-image: url(../images/dota2-side.jpg);
}

.event-card.event-fortnite .event-card-image .icon {
  background-image: url(../images/fortnite-side.jpg);
}

.event-card.event-pubg .event-card-image .icon {
  background-image: url(../images/pubg-side.jpg);
}

.event-card.event-csgo .event-card-image .icon {
  background-image: url(../images/csgo-side.jpg);
}

.event-card.event-lol .event-card-image .icon {
  background-image: url(../images/lol-side.jpg);
}

.event-card.event-valorant .event-card-image .icon {
  background-image: url(../images/valorant-side.jpg);
}

.event-card.event-apex .event-card-image .icon {
  background-image: url(../images/apex-side.jpg);
}

.event-card.event-all .event-card-image .icon {
  background-image: url(../images/all-side.jpg);
}

.event-card.event-custom .event-card-image .icon {
  background-image: url(../images/custom-side.jpg);
}

/* ========================================
   Event Detail 页面样式
   ======================================== */
.event-detail-container .rounded-top {
  padding: 24px;
}

.event-detail-card-title {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.185em;
  color: #ffffff;
  padding: 0;
  margin-bottom: 16px;
}

.event-detail-container .bd-highlight {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  background: rgba(14, 18, 29, 0.25) !important;
  border: 1px solid #232631 !important;
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: none !important;
}

.event-detail-container .bd-highlight .container {
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.214em;
  color: #576081;
}

.event-detail-time-wrapper {
  gap: 8px;
  margin-bottom: 12px;
}

.event-detail-time {
  gap: 10px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 6px;
}

/* Winners 卡片 */
.event-detail-winners-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  background: url("../images/event-rank-bg.png") center/cover no-repeat;
  border: 1px solid #232631 !important;
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.event-detail-winners-list {
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.event-winner-item {
  gap: 20px;
  flex: 1;
  padding: 16px 0;
}

.event-winner-medal {
  width: 46.74px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

.event-winner-medal .medal-icon {
  width: 46.74px;
  height: 44px;
  display: block;
  flex-shrink: 0;
  transform: scale(2.85);
  transform-origin: center center;
}

.event-winner-info {
  gap: 4px;
  width: 100%;
}

.event-winner-name {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.185em;
  color: #ffffff;
  text-align: center;
}

.event-winner-bonus {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.185em;
  color: #576081;
  text-align: center;
}

/* 隐藏旧的分隔线 */
.event-detail-container .rounded-top hr {
  display: none;
}

/* 排行榜表格样式 */
.event-detail-container .rounded-top > .container:last-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(14, 18, 29, 0.25) !important;
  border: none;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: calc(100vh - 400px);
  margin-top: 20px;
}

.event-detail-container #table-event-detail {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 4px;
  width: 100%;
  background: transparent;
}

.event-detail-container #table-event-detail thead th {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081;
  border: none;
  padding: 12px 16px;
}

.event-detail-container #table-event-detail tbody tr {
  border-radius: 8px;
}

.event-detail-container #table-event-detail tbody td {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  border: none;
  padding: 12px 16px;
}

/* 排行榜前三名高亮 */
.event-detail-container #table-event-detail tbody tr.event-leaderboard-first {
  background: linear-gradient(90deg, rgba(56, 50, 36, 1) 0%, rgba(21, 23, 30, 1) 25%);
  border: 1px solid #232631;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-first td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-first td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-second {
  background: linear-gradient(90deg, rgba(47, 50, 61, 1) 0%, rgba(21, 23, 30, 1) 26%);
  border: 1px solid #232631;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-second td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-second td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-third {
  background: linear-gradient(90deg, rgba(50, 40, 33, 1) 0%, rgba(21, 23, 30, 1) 26%);
  border: 1px solid #232631;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-third td:first-child,
.event-detail-container #table-event-detail tbody tr.event-leaderboard-third td:last-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.event-detail-container #table-event-detail tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-first:hover {
  background: linear-gradient(90deg, rgba(56, 50, 36, 0.8) 0%, rgba(21, 23, 30, 0.8) 25%);
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-second:hover,
.event-detail-container #table-event-detail tbody tr.event-leaderboard-third:hover {
  background: linear-gradient(90deg, rgba(47, 50, 61, 0.8) 0%, rgba(21, 23, 30, 0.8) 26%);
}

/* Event Detail 左侧卡片 */
.event-detail-main .event {
  background: rgba(14, 18, 29, 0.25);
  border: 1px solid #232631;
  border-radius: 12px;
  padding: 16px;
}

.event-detail-main .event .icon {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin-right: 16px;
  flex-shrink: 0;
}

.event-detail-main .event .info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.event-detail-main .event .info label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
  max-width: 100%;
  overflow: hidden;
}

.event-detail-main .event .info label .game-name-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-detail-main .event .info .name {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}

/* 三列卡片等高 */
.event-detail-container .rounded-top > .d-flex:first-child {
  align-items: stretch;
}

.event-detail-container .rounded-top > .d-flex:first-child > .col-4 {
  margin-bottom: 0 !important;
}

.event-detail-container .rounded-top > .d-flex:first-child .event-detail-main,
.event-detail-container .rounded-top > .d-flex:first-child .event-detail-main .event {
  height: 100%;
}

.event-detail-container .rounded-top > .d-flex:first-child .bd-highlight,
.event-detail-container .rounded-top > .d-flex:first-child .event-detail-winners-card  {
  flex: 1;
}

/* 排行榜第一列样式 */
.event-detail-container #table-event-detail tbody td:first-child {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.172em;
  color: #ffd773;
  width: 160px;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-second td:first-child {
  color: #ececec;
  font-size: 24px;
  font-family: "Rubik", sans-serif;
}

.event-detail-container #table-event-detail tbody tr.event-leaderboard-third td:first-child {
  color: #d5a784;
  font-size: 24px;
  font-family: "Rubik", sans-serif;
}

.event-detail-container #table-event-detail tbody tr:not(.event-leaderboard-first):not(.event-leaderboard-second):not(.event-leaderboard-third) td:first-child {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.172em;
  color: #576081;
}

.event-detail-container #table-event-detail tbody tr:not(.event-leaderboard-first):not(.event-leaderboard-second):not(.event-leaderboard-third) td {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.172em;
}

.event-detail-container #table-event-detail tbody td label {
  margin: 0;
  font-weight: inherit;
  color: inherit;
}

/* 排行榜表格对齐 */
.event-detail-container #table-event-detail thead th:first-child,
.event-detail-container #table-event-detail thead th:nth-child(2),
.event-detail-container #table-event-detail tbody td:first-child,
.event-detail-container #table-event-detail tbody td:nth-child(2) {
  text-align: left;
}

/* ========================================
   Rank 页面样式
   ======================================== */
.rank-page-container {
  padding: 24px 30px 0px;
  gap: 40px;
  box-sizing: border-box;
}

/* Game Icons Header */
.rank-game-icons {
  gap: 20px;
  height: 32px;
}

.rank-game-icons .game-icon {
  width: 70px;
  height: 32px;
  cursor: pointer;
  filter: grayscale(100%) brightness(0.6);
  opacity: 0.7;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
}

.rank-game-icons .game-icon:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: scale(1.05);
}

.rank-game-icons .game-icon.active {
  filter: grayscale(0%) brightness(1.1);
  opacity: 1;
  transform: scale(1.1);
}

.rank-game-icons .game-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rank-winners {
  padding: 0 20px;
  gap: 80px;
  width: 100%;
  height: 76px;
  background: url("../images/rank.jpeg") center/cover no-repeat;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  margin-bottom: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

.winners-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  flex-shrink: 0;
}

.winner-item {
  gap: 18px;
  flex-shrink: 0;
}

.winner-details {
  gap: 4px;
}

.winner-item .winner-info {
  gap: 8px;
  white-space: nowrap;
}

.winner-item .winner-points {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 0.02em;
  color: #576081;
  text-transform: uppercase;
}

.winner-rank {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.winner-separator {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}

.winner-name {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.winner-medal {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  overflow: visible;
}

.winner-medal .medal-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(2.85);
  transform-origin: center center;
}

.winner-medal .medal-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.rank-table-container {
  gap: 0;
  background: rgba(14, 18, 29, 0.25);
  border: 1px solid #232631;
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0;
  overflow-y: auto;
  max-height: calc(100vh - 350px);
}

.rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  margin: 0;
}

.rank-table thead {
  background: rgba(14, 18, 29, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
}

.rank-table th {
  padding: 12px 16px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  color: #576081;
  text-align: left;
  border: none;
}

.rank-table tbody tr {
  background: transparent;
  transition: background 0.2s ease;
}

.rank-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.rank-table td {
  padding: 14px 16px;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  color: #ffffff;
  border-bottom: 1px solid #232631;
}

.rank-table td.position {
  font-weight: 600;
  font-size: 16px;
  width: 100px;
  text-align: left;
}

.rank-table td.player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-table td.player .player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rank-table td.prize {
  font-weight: 600;
  font-size: 14px;
  color: #86c3f6;
}

.rank-table tbody tr.top-1 td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rank-table tbody tr.top-1 td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rank-table tbody tr.top-1 td {
  background: rgba(255, 193, 7, 0.08);
  border-bottom: none;
}

.rank-table tbody tr.top-1 td.position {
  color: #ffd773;
  font-weight: 700;
}

.rank-table tbody tr.top-1:hover td {
  background: rgba(255, 193, 7, 0.12);
}

.rank-table tbody tr.top-2 td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rank-table tbody tr.top-2 td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rank-table tbody tr.top-2 td {
  background: rgba(192, 192, 192, 0.08);
  border-bottom: none;
}

.rank-table tbody tr.top-2 td.position {
  color: #c2c8d9;
  font-weight: 700;
}

.rank-table tbody tr.top-2:hover td {
  background: rgba(192, 192, 192, 0.12);
}

.rank-table tbody tr.top-3 td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rank-table tbody tr.top-3 td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rank-table tbody tr.top-3 td {
  background: rgba(205, 127, 50, 0.08);
  border-bottom: none;
}

.rank-table tbody tr.top-3 td.position {
  color: #e89b6a;
  font-weight: 700;
}

.rank-table tbody tr.top-3:hover td {
  background: rgba(205, 127, 50, 0.12);
}

.rank-table-container::-webkit-scrollbar {
  width: 8px;
}

.rank-table-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.rank-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.rank-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   System Settings Modal 样式
   ======================================== */
.myModalMouse .modal-dialog {
  max-width: 460px;
}

.myModalMouse .modal-content {
  border: 1px solid #232631 !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalMouse .modal-header {
  padding: 0 !important;
  margin-bottom: 40px;
  position: relative;
}

.myModalMouse .close {
  position: absolute;
  right: 0;
  top: -2px;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myModalMouse .close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.myModalMouse .close svg path {
  stroke: #576081 !important;
}

.myModalMouse .close:hover svg path {
  stroke: #ffffff !important;
}

.myModalMouse .mb-4 {
  margin-bottom: 24px !important;
}

.myModalMouse h6 {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  color: #576081 !important;
  margin: 0 0 12px 0 !important;
  text-align: left;
}

.mouse-move-slider-container,
.double-click-slider-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 20px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  position: relative;
  min-height: 54px;
}

.mouse-move-slider-track,
.double-click-slider-track {
  flex: 1;
  height: 18px;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block;
  position: relative;
}

.mouse-move-slider-progress,
.double-click-slider-progress {
  position: absolute;
  left: 0;
  top: 1.53px;
  width: 50%;
  height: 16px;
  background: #1d9f57;
  border-radius: 12px;
  transition: width 0.2s ease;
  z-index: 2;
  overflow: visible;
}

.mouse-move-slider-handle,
.double-click-slider-handle {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  background: #1d9f57;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 3;
  transition: left 0.2s ease;
  margin: 0;
}

.mouse-move-value,
.double-click-value {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0 0 !important;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
}

.mouse-move-value span,
.double-click-value span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: #171e2f;
  border-radius: 50px;
  min-width: 50px;
  height: 28px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}

.myModalMouse .mouse-smoothness-control {
  display: block;
  margin-top: 20px;
}

.myModalMouse .mouse-smoothness-control .form-check-inline {
  margin-left: 0 !important;
  text-align: left;
}

.myModalMouse .mouse-smoothness-control .form-check-label {
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
}

.myModalMouse .mouse-smoothness-control input[type="checkbox"] {
  margin-right: 8px;
}

.myModalMouse .modal-footer {
  margin-top: 20px;
}

/* Audio Settings Modal */
.myModalAudio .modal-dialog {
  max-width: 460px;
}

.myModalAudio .modal-content {
  border: 1px solid #232631 !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalAudio .modal-header {
  padding: 0 !important;
  margin-bottom: 40px;
  position: relative;
}

.myModalAudio .close {
  position: absolute;
  right: 0;
  top: -2px;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myModalAudio .close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.myModalAudio .close svg path {
  stroke: #576081 !important;
}

.myModalAudio .close:hover svg path {
  stroke: #ffffff !important;
}

.volume-control-container {
  margin: 0 auto;
  width: 100%;
  gap: 15px;
}

.volume-toggle-btn {
  margin: 0 !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #576081;
  flex-shrink: 0;
}

.volume-toggle-btn:hover {
  color: #ffffff;
  opacity: 1;
}

.volume-toggle-btn #volumeIcon {
  font-size: 30px;
  color: inherit;
}

.volume-toggle-btn #volumeIcon.fa-volume-xmark {
  color: #dc3545 !important;
}

.volume-slider-container {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 20px;
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  min-height: 36px;
}

.volume-slider-track {
  flex: 1;
  height: 18px;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block;
  position: relative;
}

.volume-slider-progress {
  position: absolute;
  left: 0;
  top: 1.53px;
  width: 50%;
  height: 16px;
  background: #1d9f57;
  border-radius: 12px;
  transition: width 0.2s ease;
  z-index: 2;
  overflow: visible;
}

.volume-slider-handle {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  background: #1d9f57;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 3;
  transition: left 0.2s ease;
  margin: 0;
}

.volume-value {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
}

.volume-value span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: #171e2f;
  border-radius: 50px;
  min-width: 50px;
  height: 28px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}

/* ========================================
   Feedback Modal 样式
   ======================================== */
.myModalFeedback .modal-dialog {
  max-width: 460px;
}

.myModalFeedback .modal-content {
  border: none !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalFeedback .modal-header {
  padding: 0 !important;
  margin-bottom: 40px;
  position: relative;
}

.myModalFeedback .close {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
}

.myModalFeedback .close svg path {
  stroke: #576081 !important;
}

.myModalFeedback .close:hover svg path {
  stroke: #ffffff !important;
}

.myModalFeedback .modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.myModalFeedback .form-group {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myModalFeedback .form-group label {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081;
}

.myModalFeedback .form-control,
.myModalFeedback .modal-input {
  background: #0e121d !important;
  border: 1px solid #232631 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #f5f8ff !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px !important;
  height: 48px !important;
}

.myModalFeedback .form-control:focus,
.myModalFeedback .modal-input:focus {
  background: #0e121d !important;
  border-color: #232631 !important;
  outline: none !important;
  box-shadow: none !important;
}

.myModalFeedback .form-control::placeholder,
.myModalFeedback .modal-input::placeholder {
  color: #576081;
}

.myModalFeedback textarea.form-control,
.myModalFeedback textarea.modal-input {
  min-height: 120px;
  resize: vertical;
  height: auto !important;
}

/* ========================================
   Lock Screen Modal 样式
   ======================================== */
.myModalLock .modal-dialog {
  max-width: 460px;
}

.myModalLock .modal-content {
  border: none !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalLock .modal-header {
  padding: 0 !important;
  margin-bottom: 40px;
  position: relative;
}

.myModalLock .close {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
}

.myModalLock .close svg path {
  stroke: #576081 !important;
}

.myModalLock .close:hover svg path {
  stroke: #ffffff !important;
}

.myModalLock .modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.myModalLock .form-group {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myModalLock .form-control,
.myModalLock .modal-input {
  background: #0e121d !important;
  border: 1px solid #232631 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #f5f8ff !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px !important;
  height: 48px !important;
}

.myModalLock .form-control:focus,
.myModalLock .modal-input:focus {
  background: #0e121d !important;
  border-color: #232631 !important;
  outline: none !important;
  box-shadow: none !important;
}

.myModalLock .form-control::placeholder,
.myModalLock .modal-input::placeholder {
  color: #576081;
}

.myModalLock .lock-screen-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  color: #f6c453;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.myModalLock .lock-screen-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: rgba(246, 196, 83, 0.14);
  box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.2);
}

.myModalLock .lock-screen-note-icon svg {
  display: block;
}

/* ========================================
   Change Password Modal 样式
   ======================================== */
.myModalChangePassword .modal-dialog {
  max-width: 460px;
}

.myModalChangePassword .modal-content {
  border: none !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalChangePassword .modal-header {
  padding: 0 !important;
  margin-bottom: 40px;
  position: relative;
}

.myModalChangePassword .close {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
}

.myModalChangePassword .close svg path {
  stroke: #576081 !important;
}

.myModalChangePassword .close:hover svg path {
  stroke: #ffffff !important;
}

.myModalChangePassword .modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.myModalChangePassword .form-group {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myModalChangePassword .form-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
  margin-bottom: 0;
  text-align: left;
}

.myModalChangePassword .password-wrapper {
  position: relative;
  width: 100%;
}

.myModalChangePassword .form-control,
.myModalChangePassword .modal-input {
  background: #0e121d !important;
  border: 1px solid #232631 !important;
  border-radius: 12px !important;
  padding: 14px 48px 14px 16px !important;
  color: #f5f8ff !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px !important;
  height: 48px !important;
  width: 100% !important;
}

.myModalChangePassword .form-control:focus,
.myModalChangePassword .modal-input:focus {
  background: #0e121d !important;
  border-color: #232631 !important;
  outline: none !important;
  box-shadow: none !important;
}

.myModalChangePassword .form-control::placeholder,
.myModalChangePassword .modal-input::placeholder {
  color: #576081;
}

.myModalChangePassword .password-toggle {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
  z-index: 10 !important;
}

.myModalChangePassword .password-toggle g {
  opacity: 0.4 !important;
}

.myModalChangePassword .password-toggle:hover g {
  opacity: 0.7 !important;
}

.myModalChangePassword .password-toggle path {
  stroke: #576081 !important;
}

/* ========================================
   Order List Modal 样式
   ======================================== */
.myModalOrderList .modal-content-order {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #232631 !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalOrderList .modal-header {
  padding: 0 !important;
  position: relative;
}

.myModalOrderList .close {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
}

.myModalOrderList .close svg path {
  stroke: #576081 !important;
}

.myModalOrderList .close:hover svg path {
  stroke: #ffffff !important;
}

.order-list-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.order-list-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.185em;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center;
  order: 0;
}

.order-search-form {
  width: 100%;
  order: 1;
}

.order-search-input-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: #1c2438;
  border-radius: 12px;
  width: 100%;
  max-width: 300px;
}

.order-search-input-group .search-icon {
  width: 16px;
  height: 16px;
  color: #576081;
  flex-shrink: 0;
}

.order-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: #576081 !important;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.185em;
  padding: 0 !important;
  outline: none;
}

.order-search-input::placeholder {
  color: #576081;
}

.order-table-container {
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.order-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.order-table thead th {
  background: rgba(14, 18, 29, 0.5);
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
  border: none !important;
  padding: 16px;
}

.order-table tbody tr {
  background: transparent;
}

.order-table tbody td {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 16px;
}

.order-status {
  display: flex;
  align-items: center;
}

.order-status-pending,
.order-status-paid,
.order-status-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.order-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.order-status-pending .status-dot {
  background: #ffc107;
}

.order-status-paid .status-dot {
  background: #1d9f57;
}

.order-status-error .status-dot {
  background: #dc3545;
}

.order-pagination {
  margin-top: 20px;
}

.order-pagination .pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.order-pagination .page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
  transition: all 0.2s ease;
}

.order-pagination .page-item:first-child .page-link,
.order-pagination .page-item:nth-child(2) .page-link,
.order-pagination .page-item:nth-last-child(2) .page-link,
.order-pagination .page-item:last-child .page-link {
  width: 40px;
  height: 40px;
  border-radius: 10px !important;
}

.order-pagination .page-item.active .page-link {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}

.order-pagination .page-link:hover {
  color: #ffffff !important;
}

/* Order List Modal Dialog */
.myModalOrderList .modal-dialog {
  max-width: 1212px;
}

.myModalOrderList .table-responsive {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

/* Order Table Column Widths */
.myModalOrderList .order-table th:first-child,
.myModalOrderList .order-table td:first-child {
  width: 80px;
  padding-left: 16px;
}

.myModalOrderList .order-table th:nth-child(2),
.myModalOrderList .order-table td:nth-child(2) {
  width: 150px;
}

.myModalOrderList .order-table th:nth-child(3),
.myModalOrderList .order-table td:nth-child(3) {
  width: 100px;
}

.myModalOrderList .order-table th:nth-child(4),
.myModalOrderList .order-table td:nth-child(4) {
  width: 300px;
}

.myModalOrderList .order-table th:nth-child(5),
.myModalOrderList .order-table td:nth-child(5) {
  width: 100px;
  text-align: right;
}

.myModalOrderList .order-table th:nth-child(6),
.myModalOrderList .order-table td:nth-child(6) {
  width: 100px;
}

.myModalOrderList .order-table th:nth-child(7),
.myModalOrderList .order-table td:nth-child(7) {
  width: 100px;
  padding-right: 16px;
}

/* Order Table Scrollbar */
.order-table-container {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.order-table-container::-webkit-scrollbar {
  width: 6px;
}

.order-table-container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.order-table-container::-webkit-scrollbar-thumb {
  background: #2c3142;
  border-radius: 10px;
}

.order-table-container::-webkit-scrollbar-thumb:hover {
  background: #3a3f54;
}

.myModalOrderList .order-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ========================================
   Shop Modal 样式
   ======================================== */
.myModalBuy .modal-dialog,
.myModalPrint .modal-dialog {
  max-width: 460px;
}

.myModalBuy .modal-content,
.myModalPrint .modal-content {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px !important;
  border: none !important;
  padding: 32px 24px 24px 24px;
}

.myModalBuy .modal-header,
.myModalPrint .modal-header {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 24px;
  position: relative;
}

.myModalBuy .modal-title,
.myModalPrint .modal-title {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: #ffffff !important;
}

.myModalBuy .close,
.myModalPrint .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  opacity: 0.8;
}

.myModalBuy .close:hover,
.myModalPrint .close:hover {
  opacity: 1;
}

.myModalBuy .modal-body,
.myModalPrint .modal-body {
  padding: 0 !important;
}

.myModalBuy .table.cart,
.myModalPrint .table.cart {
  border-top: 1px solid rgba(87, 96, 129, 0.25);
  margin-bottom: 24px !important;
}

.myModalBuy .table.cart td,
.myModalPrint .table.cart td {
  border-bottom: 1px solid rgba(87, 96, 129, 0.25);
  padding: 12px 0;
  color: #ffffff;
}

.myModalBuy .table.cart tfoot td,
.myModalPrint .table.cart tfoot td {
  border-bottom: none;
}

/* ========================================
   Balance History Modal 样式
   ======================================== */
.myModalBalanceHistory .modal-content-order {
  background: rgba(14, 18, 29, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #232631 !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
}

.myModalBalanceHistory .modal-header {
  padding: 0 !important;
  position: relative;
}

.myModalBalanceHistory .close {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #576081;
}

.myModalBalanceHistory .close svg path {
  stroke: #576081 !important;
}

.myModalBalanceHistory .close:hover svg path {
  stroke: #ffffff !important;
}

.balance-history-header {
  gap: 20px;
  margin-bottom: 20px;
}

.balance-history-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.185em;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center;
}

.balance-summary {
  gap: 40px;
  padding: 0 24px;
}

.balance-summary .summary-item {
  gap: 8px;
}

.balance-summary .summary-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
}

.balance-summary .summary-value {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff !important;
}

.balance-summary .summary-topup {
  color: #1d9f57 !important;
}

.balance-summary .summary-expenses {
  color: #ff3347 !important;
}

.balance-table-container {
  background: rgba(14, 18, 29, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.balance-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.balance-table thead th {
  background: rgba(14, 18, 29, 0.5);
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
  border: none !important;
  padding: 16px;
}

.balance-table tbody tr {
  background: transparent;
}

.balance-table tbody td {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 16px;
}

.balance-bonus {
  color: #1d9f57 !important;
}

.balance-pagination {
  margin-top: 20px;
}

.balance-pagination .pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.balance-pagination .page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #576081 !important;
  transition: all 0.2s ease;
}

.balance-pagination .page-item:first-child .page-link,
.balance-pagination .page-item:nth-child(2) .page-link,
.balance-pagination .page-item:nth-last-child(2) .page-link,
.balance-pagination .page-item:last-child .page-link {
  width: 40px;
  height: 40px;
  border-radius: 10px !important;
}

.balance-pagination .page-item.active .page-link {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}

.balance-pagination .page-link:hover {
  color: #ffffff !important;
}

.myModalRegisterMember .get-code-btn, .myModalConvertMember .get-code-btn {
  width: 61px !important;
  height: 17px !important;
  font-family: "Rubik", sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 17px !important;
  color: #86c3f6 !important;
  flex: none !important;
  order: 2 !important;
  flex-grow: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
  display: block !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.myModalRegisterMember .get-code-btn:hover, .myModalConvertMember .get-code-btn:hover {
  color: #5ca3d6 !important;
  text-decoration: underline !important;
}

.myModalRegisterMember .get-code-btn:disabled, .myModalConvertMember .get-code-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.myModalRegisterMember .modal-header .close,
.myModalTopupLogin .modal-header .close,
.myModalTopup .modal-header .close,
.myModalMemberLogin .modal-header .close {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.myModalRegisterMember .modal-header .close svg,
.myModalTopupLogin .modal-header .close svg,
.myModalTopup .modal-header .close svg,
.myModalMemberLogin .modal-header .close svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

.myModalRegisterMember .modal-header .close:hover svg path,
.myModalTopupLogin .modal-header .close:hover svg path,
.myModalTopup .modal-header .close:hover svg path,
.myModalMemberLogin .modal-header .close:hover svg path {
  stroke: #ffffff !important;
}

.myModalMouse .modal-title,
.myModalAudio .modal-title,
.myModalFeedback .modal-title,
.myModalLock .modal-title,
.myModalChangePassword .modal-title {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.185em;
  color: #ffffff !important;
  width: 100%;
  text-align: center;
}

.myModalRegisterMember .modal-body .form-control,
.myModalTopupLogin .modal-body .form-control,
.myModalForgotPassword .modal-body .form-control,
.myModalTopup .modal-body .form-control {
  background-color: rgba(24, 29, 39, 0.95) !important;
  border: 1px solid rgba(87, 96, 129, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  height: 44px !important;
}

.myModalRegisterMember .modal-footer,
.myModalTopupLogin .modal-footer,
.myModalForgotPassword .modal-footer,
.myModalTopup .modal-footer {
  padding: 24px 0 0 0 !important;
}

.myModalAudio .modal-footer,
.myModalFeedback .modal-footer,
.myModalLock .modal-footer,
.myModalChangePassword .modal-footer {
  margin-top: 40px;
}

.myModalRegisterMember .modal-content,
.myModalTopupLogin .modal-content,
.myModalMemberLogin .modal-content,
.myModalQRMemberRegister .modal-content,
.myModalForgotPassword .modal-content,
.myModalTopup .modal-content {
  padding: 32px 40px 0 40px!important;
}

.myModalRegisterMember .modal-header,
.myModalTopupLogin .modal-header,
.myModalMemberLogin .modal-header,
.myModalQRMemberRegister .modal-header,
.myModalForgotPassword .modal-header,
.myModalTopup .modal-header {
  padding: 0 0 24px 0 !important;
}

.myModalRegisterMember .modal-body,
.myModalTopupLogin .modal-body,
.myModalForgotPassword .modal-body,
.myModalTopup .modal-body,
.myModalMouse .modal-body,
.myModalAudio .modal-body {
  padding: 0 !important;
}

/* Member Avatar Modal */
.myModalMemberAvatar .nav-tabs {
	border-bottom: 1px solid #444;
}

.myModalMemberAvatar .nav-link {
	color: #999;
	border: none;
	background: transparent;
	font-size: 1.1rem;
	padding: 0.8rem 1.5rem;
}

.myModalMemberAvatar .nav-link:hover {
	color: #ccc;
}

.myModalMemberAvatar .nav-link.active {
	color: var(--client_themes_front_color);
	border-bottom: 3px solid var(--client_themes_front_color);
	background-color: transparent;
}

.myModalMemberAvatar .avatar-grid {
	max-height: 300px;
}

.myModalMemberAvatar .avatar-option {
	transition: all 0.2s;
	cursor: pointer;
}

.myModalMemberAvatar .avatar-option:hover {
	transform: scale(1.1);
}

.myModalMemberAvatar .avatar-option img.border-selected {
	border: 3px solid var(--client_themes_front_color);
	box-shadow: 0 0 10px rgba(73, 209, 73, 0.5);
}

.myModalMemberAvatar .selected-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.myModalMemberAvatar .upload-area {
	border: 2px dashed #666;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s;
}

.myModalMemberAvatar .upload-area:hover {
	border-color: var(--client_themes_front_color);
	background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Electric Border (闪电边框) 样式
   ======================================== */
/* === 闪电边框 CSS 动画（替代 SVG feTurbulence filter）=== */
@keyframes electro-spin {
	to { transform: rotate(360deg); }
}


.game-electric-shell,
.shop-electric-shell {
	position: relative;
	--electro-radius: 12px;
	--electric-border-color: #dd8448;
	--electric-light-color: oklch(from var(--electric-border-color) l c h);
	--gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4);
	--color-neutral-900: oklch(0.185 0 0);
	border-radius: var(--electro-radius);
	isolation: isolate;
}

:is(#page-game, #page-shop, #page-rank, #page-event) > .container.mb-5.game-electric-shell {
	overflow: visible !important;
}

#page-shop > .container.mb-5.shop-electric-shell {
	overflow: visible !important;
}

.game-electric-shell > .electro-filter-svg,
.shop-electric-shell > .electro-filter-svg,
#page_start_session .electro-filter-svg {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.game-electric-shell > .electro-border-overlay,
.shop-electric-shell > .electro-border-overlay,
#page_start_session .card-container > .electro-border-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	display: none;
	border-radius: var(--electro-radius);
}

.game-electric-shell.electric-border > .electro-border-overlay,
.shop-electric-shell.electric-border > .electro-border-overlay {
	display: block;
	opacity: 1;
}

.game-electric-shell > .d-flex.d-inline-flex,
.game-electric-shell > .p-4.flex-grow-1.container,
.shop-electric-shell > .d-flex.d-inline-flex,
.shop-electric-shell > .p-4.flex-grow-1.container {
	position: relative;
	z-index: 5;
}

.game-electric-shell > .electro-border-overlay .inner-container,
.shop-electric-shell > .electro-border-overlay .inner-container,
#page_start_session .card-container > .electro-border-overlay .inner-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.game-electric-shell > .electro-border-overlay .border-outer,
.shop-electric-shell > .electro-border-overlay .border-outer,
#page_start_session .card-container > .electro-border-overlay .border-outer {
	border-radius: var(--electro-radius);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.game-electric-shell > .electro-border-overlay .main-card,
.shop-electric-shell > .electro-border-overlay .main-card,
#page_start_session .card-container > .electro-border-overlay .main-card {
	position: absolute;
	inset: 0;
	border-radius: var(--electro-radius);
	padding: 2px;
	overflow: hidden;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* 静态 conic-gradient 只光栅化一次，靠 transform: rotate() 旋转，避免逐帧重算渐变（低 CPU）*/
.game-electric-shell > .electro-border-overlay .main-card::before,
.shop-electric-shell > .electro-border-overlay .main-card::before,
#page_start_session .card-container > .electro-border-overlay .main-card::before {
	content: '';
	position: absolute;
	width: 250%;
	height: 250%;
	top: -75%;
	left: -75%;
	background: conic-gradient(
		from 0deg,
		rgba(221,132,72,0)    0deg,
		rgba(255,180,80,0.5)  30deg,
		rgba(255,215,130,1)   55deg,
		rgba(255,180,80,0.5)  80deg,
		rgba(221,132,72,0)   110deg,
		rgba(221,132,72,0)   200deg,
		rgba(221,132,72,0.3) 240deg,
		rgba(255,160,80,0.6) 270deg,
		rgba(221,132,72,0.3) 300deg,
		rgba(221,132,72,0)   360deg
	);
	animation: electro-spin 20s steps(60) infinite;
}

.game-electric-shell > .electro-border-overlay .glow-layer-1,
.shop-electric-shell > .electro-border-overlay .glow-layer-1,
#page_start_session .card-container > .electro-border-overlay .glow-layer-1 {
	border: 2px solid rgba(221, 132, 72, 0.6);
	border-radius: var(--electro-radius);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	filter: blur(1px);
}

.game-electric-shell > .electro-border-overlay .glow-layer-2,
.shop-electric-shell > .electro-border-overlay .glow-layer-2,
#page_start_session .card-container > .electro-border-overlay .glow-layer-2 {
	border: 2px solid var(--electric-light-color);
	border-radius: var(--electro-radius);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.game-electric-shell > .electro-border-overlay .overlay-1,
.game-electric-shell > .electro-border-overlay .overlay-2,
.shop-electric-shell > .electro-border-overlay .overlay-1,
.shop-electric-shell > .electro-border-overlay .overlay-2 {
	display: none;
}

.game-electric-shell > .electro-border-overlay .background-glow,
.shop-electric-shell > .electro-border-overlay .background-glow,
#page_start_session .card-container > .electro-border-overlay .background-glow {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--electro-radius);
	filter: blur(32px);
	transform: scale(1);
	opacity: 0.3;
	z-index: -1;
	background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}

/* ========================================
   start-session 卡片差异（其余规则已合并到 electro-border-overlay 选择器组）
   ======================================== */
#page_start_session .card-wh {
	width: 220px;
	height: 320px;
}

#page_start_session .card-container {
	--electro-radius: 24px;
	--electric-border-color: #dd8448;
	--electric-light-color: oklch(from var(--electric-border-color) l c h);
	--gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4);
	--color-neutral-900: oklch(0.185 0 0);
	padding: 2px;
	border-radius: var(--electro-radius);
	position: relative;
	isolation: isolate;
	background:
		linear-gradient(-30deg, var(--gradient-color), transparent, var(--gradient-color)),
		linear-gradient(to bottom, var(--color-neutral-900), var(--color-neutral-900));
}

/* overlay 对 start-session 卡片始终显示（game/shop 靠 .electric-border 触发）*/
#page_start_session .card-container > .electro-border-overlay {
	display: block;
}

/* overlay-1/2：game/shop 为 display:none，start-session 中可见 */
#page_start_session .card-container > .electro-border-overlay .overlay-1,
#page_start_session .card-container > .electro-border-overlay .overlay-2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--electro-radius);
	mix-blend-mode: overlay;
	transform: scale(1.1);
	filter: blur(16px);
	background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white);
}
#page_start_session .card-container > .electro-border-overlay .overlay-1 { opacity: 1; }
#page_start_session .card-container > .electro-border-overlay .overlay-2 { opacity: 0.5; }

#page_start_session .start-session-card-body {
	z-index: 1;
}

#payment_qr img, #login_payment_qr img {
    display: block !important;
    margin: 0 auto !important;
}

/* Access Code 4-Digit Input */
.access-code-container {
    display: grid;
    grid-template-columns: repeat(4, 53px);
    column-gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

.access-code-input {
    width: 53px !important;
    height: 78px !important;
    background: rgba(24, 29, 39, 0.95) !important;
    border: 1px solid rgba(87, 96, 129, 0.3) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    transition: all 0.3s ease;
    padding: 0 !important;
}

.access-code-input:focus {
    background: rgba(24, 29, 39, 1) !important;
    border-color: #3faa5e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(63, 170, 94, 0.2) !important;
}

.text-danger {
    color: #dc3545 !important;
    text-align: left;
}

/* Cart icon inside hover overlay - override .shop-image img dimensions */
.shop-image .hover-overlay img {
  position: relative; 
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* ========================================
   Blue Theme Card Login Styles
   ======================================== */

/* Card Container */
.blue-card-container {
    width: 412px;
    max-width: 412px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Main Card */
.blue-main-card {
    background: rgba(24, 29, 39, 0.95);
    border: 1px solid rgba(87, 96, 129, 0.3);
    border-radius: 12px;
    overflow: visible;
}

/* Card Header */
.blue-card-header {
    padding: 16px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 600;
    min-height: 40px;
}

.blue-back-arrow {
    cursor: pointer;
    font-size: 18px;
    color: #ffffff;
    margin-right: 12px;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.blue-back-arrow:hover {
    opacity: 0.7;
}

.blue-back-arrow:focus {
    opacity: 0.7;
    outline: 2px solid rgba(63, 170, 94, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

.blue-card-title {
    flex: 1;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.blue-signup-link {
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.blue-signup-link:hover {
    color: #3faa5e;
}

.blue-signup-link:focus {
    outline: none;
    color: #3faa5e;
}

/* Card Body */
.blue-card-body {
    padding: 16px 20px 20px 20px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Quick Icons Row */
.blue-quick-icons {
    display: flex;
    gap: 8px;
}

.blue-quick-icon-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.blue-quick-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex: 1;
    background: rgba(24, 29, 39, 0.95);
    border: 1px solid rgba(87, 96, 129, 0.3);
    border-radius: 12px;
    padding: 13.5px 16px;
}

.blue-quick-icon-item:hover {
    opacity: 0.8;
}

.blue-quick-icon-item:focus {
    opacity: 0.8;
    outline: 2px solid rgba(63, 170, 94, 0.6);
    outline-offset: -2px;
}

.blue-quick-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.blue-quick-icon-circle img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.blue-quick-icon-label {
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/* Row Items (Balance, Admin) */
.blue-row-item {
    background: rgba(24, 29, 39, 0.95);
    border: 1px solid rgba(87, 96, 129, 0.3);
    border-radius: 12px;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #ffffff;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.blue-row-item:hover {
    background: rgba(35, 44, 69, 0.6);
}

.blue-row-item:focus {
    background: rgba(35, 44, 69, 0.6);
    outline: 2px solid rgba(63, 170, 94, 0.6);
    outline-offset: -2px;
}

.blue-row-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blue-row-item-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
}

.blue-row-item-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.blue-row-item-arrow {
    color: #576081;
    font-size: 16px;
}

/* Icon Wrapper (kept for backward compat) */
.blue-icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(63, 170, 94, 0.1);
    margin-right: 12px;
}

.blue-icon-wrapper img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.blue-icon-wrapper.no-icon-hover {
    background: transparent;
}

/* Form Controls inside Card */
.blue-card-body .form-label {
    color: #576081 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-family: "Rubik", sans-serif !important;
}

.blue-card-body .form-control,
.blue-card-body .login-input {
    background-color: rgba(24, 29, 39, 0.95) !important;
    border: 1px solid rgba(87, 96, 129, 0.3) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    height: 46px !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
    width: 100% !important;
}

.blue-card-body .form-control:focus,
.blue-card-body .login-input:focus {
    background-color: rgba(24, 29, 39, 1) !important;
    border-color: rgba(87, 96, 129, 0.5) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Password wrapper inside card */
.blue-card-body .password-wrapper {
    position: relative;
}

.blue-card-body .password-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.blue-card-body .password-toggle:focus {
    outline: 2px solid rgba(63, 170, 94, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons */
.blue-btn-primary {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0;
    background: linear-gradient(90deg, #3faa5e 0%, #4caf6a 100%);
    color: #ffffff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.blue-btn-primary:hover {
    background: linear-gradient(90deg, #368f51 0%, #43a05e 100%);
    transform: translateY(-1px);
}

.blue-btn-primary:focus {
    outline: 2px solid rgba(63, 170, 94, 0.6);
    outline-offset: 2px;
}

.blue-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.blue-btn-cancel {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0;
    background: transparent;
    color: #576081;
    border-radius: 8px;
    border: 1px solid rgba(87, 96, 129, 0.3);
    cursor: pointer;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

.blue-btn-cancel:hover {
    background: rgba(87, 96, 129, 0.1);
    border-color: rgba(87, 96, 129, 0.5);
}

/* Not register link in header */
.blue-card-header .not-register-btn {
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #576081;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blue-card-header .not-register-btn:hover {
    color: #3faa5e;
}

/* Forgot password link */
.blue-card-body .reset-password-link {
    text-align: left;
    margin-top: -4px;
    margin-bottom: 12px;
}

.blue-card-body .reset-password-link a {
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #576081;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blue-card-body .reset-password-link a:hover {
    color: #7c8ab0;
}

.blue-card-body .reset-password-link a:focus {
    outline: none;
    color: #7c8ab0;
}

/* Access code inputs inside card */
.blue-card-body .access-code-container {
    display: grid;
    grid-template-columns: repeat(4, 53px);
    column-gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

.blue-card-body .access-code-input {
    width: 53px !important;
    height: 60px !important;
    background: rgba(24, 29, 39, 0.95) !important;
    border: 1px solid rgba(87, 96, 129, 0.3) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    transition: all 0.3s ease;
    padding: 0 !important;
}

.blue-card-body .access-code-input:focus {
    background: rgba(24, 29, 39, 1) !important;
    border-color: #3faa5e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(63, 170, 94, 0.2) !important;
}

/* Error messages inside card */
.blue-card-body .error-message {
    font-size: 12px;
    margin-top: 4px;
}

.blue-card-body .error-message.d-none {
    display: none;
}

.blue-card-body .error-message.show {
    display: block;
}

/* Social login QR inside card */
.blue-card-body .social-qr-wrapper {
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
}

/* Validation styles */
.blue-card-body .login-input.is-invalid {
    border-color: #dc3545 !important;
}

/* Form group spacing */
.blue-card-body .form-group {
    margin-bottom: 12px;
}

.blue-card-body .form-group:last-child {
    margin-bottom: 0;
}

/* Amount/Minutes side by side in Guest/Balance */
.blue-card-body .blue-form-row {
    display: flex;
    gap: 10px;
}

.blue-card-body .blue-form-row .form-group {
    flex: 1;
}
.offer-desc-tooltip .tooltip-inner {
	max-width: 240px;
	white-space: normal;
	word-break: break-word;
	line-height: 1.35;
	text-align: left;
}

.offer-desc-tooltip {
	pointer-events: none;
}

#localTime { font-variant-numeric: tabular-nums; }