:root {
	--r: 75;
	--g: 225;
	--b: 216;
	--rgb:rgba(var(--r),var(--g),var(--b),1);
	--color-mian:#00f3cd;
	--color-minor:#D6FDFE;
	
}
input,textarea,button{
	outline:0;
}
/* 角色卡样式 */
.character-card {
	width: 280px;
	border-radius: 12px;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(to bottom, #423c4f, #555563);
	box-shadow: 0 0 8px rgba(0, 0, 0, .6);
	outline: 1px solid rgba(255, 255, 255, .1);
	z-index: 500;
	visibility: visible;
}

.character-card-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 84px;
	background: url(../images/header.png) 0% 0% / contain;
	z-index: 1;
}

.character-card-content {
	position: relative;
	z-index: 2;
	padding: 12px;
}

.character-card-loading {
	text-align: center;
	color: var(--color-minor);
	font-size: 14px;
	padding: 30px 0;
}

.character-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 68px;
}

.character-card-avatar {
	margin-right: 12px;
	margin-top: -20px;
}

.character-card-avatar .avatar {
	border-radius: 50%;
	background: #0B2A4E;
	border: 2px solid rgba(75, 225, 216, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.character-card-info {
	flex: 1;
}

.character-card-name {
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0 0 4px rgba(0, 0, 0, .7);
	margin-bottom: 2px;
}

.character-card-level {
	font-size: 12px;
	color: #75FBD6;
	margin-bottom: 2px;
}

.character-card-title-name {
	font-size: 11px;
	color: #83c3c3;
}

.character-card-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	padding-top: 16px;
}

.character-card-btn {
}
.character-card-btn.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: rgba(11, 42, 78, 0.6);
	color: #83c3c3;
}

.character-card-btn.danger {
	background: #ff6570;
	border-color: #ff6570;
}

.character-card-btn.toggle-blacklist {
	background: #ff6570;
	border-color:#ff6570;
}



/* 舰队页面样式 */
.squadron-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px;
	gap: 12px;
	overflow: hidden;
}

.squadron-home-content {
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.squadron-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.squadron-icon {
	position: relative;
	width: 60px;
	height: 60px;
	background: linear-gradient(var(--squadron-gradient, 90deg), var(--squadron-color-1, #1a1a2e), var(--squadron-color-2, #16213e));
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.squadron-icon:after{
	content: '';
	position: absolute;
	inset: 16px;
	width: 28px;
	height: 28px;
	transform: scale(2);
	background-color: var(--squadron-pattern, #000);
	
	-webkit-mask-image: url(/static/images/avatar/squadron.png);
	mask-image: url(/static/images/avatar/squadron.png);
	
	mask-position: 0 0;
	z-index: 2;
}
.squadron-icon-0::after{
	opacity: 0;
}
.squadron-icon:before{
	content: '';
	position: absolute;
	inset: 16px;
	width: 28px;
	height: 28px;
	transform: scale(2);
	background-color: var(--squadron-bg-pattern2, #000);
	
	-webkit-mask-image: url(/static/images/avatar/squadron_bg.png);
	mask-image: url(/static/images/avatar/squadron_bg.png);
	
	mask-position: 0 0;
	opacity: .3;
	z-index: 1;
}
.squadron-pattern-0:before{
	opacity: 0;
}

.squadron-info-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 60px;
	justify-content: space-around;
}

.squadron-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.squadron-name {
	font-size: 18px;
	font-weight: bold;
	color: #75FBD6;
}

.squadron-abbreviation {
	font-size: 14px;
	color: #83c3c3;
}
.squadron-member {
	margin-left: auto;
}
.squadron-level {
	color: var(--color-mian);
	font-size: 14px;
}

.squadron-experience {
	
}

.experience-bar {
	position: relative;
	width: 100%;
	height: 16px;
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 4px;
	overflow: hidden;
}

.experience-fill {
	height: 100%;
	background-color: var(--rgb);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.experience-text {
	position: absolute;
	inset: 0;
	text-align: center;
	font-size: 14px;
	color: #fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.buff-item {
	position: relative;
	cursor: pointer;
}

.no-squadron-content {
	text-align: center;
}

.no-squadron-content p {
	margin-bottom: 20px;
	font-size: 16px;
}

.activity-progress {
	display: flex;
	gap: 8px;
}
.activity-progress-container {
	position: relative;
	flex: 1;
}
.activity-progress-bar-container {
	position: absolute;
	top: 64px;
	height: 10px;
	width: 100%;
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 6px;
}
.activity-progress-fill {
	background: var(--rgb);
	height: 100%;
	border-radius: 6px;
}
.progress-bar-container {
	position: relative;
	flex: 1;
}

.progress-bar {
	height: 12px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 6px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	box-shadow: rgb(52, 255, 252) 0px 0px 10px;
	background: linear-gradient(90deg, rgb(52, 255, 252), rgb(62, 250, 255));
	transform-origin: left center;
	animation: progress-animation linear forwards;
	animation-duration: var(--duration);
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--rgb);
	border-radius: 6px;
	transition: width 0.3s ease;
}

.activity-progress-rewards {
	position: relative;
	display: flex;
	justify-content: flex-end;
	z-index: 10;
}

.reward-marker {
	display: flex;
	gap: 14px;
	flex-direction: column;
	align-items: flex-end;
}
.progress-text {
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.squadron-rewards{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.squadron-item {
	display: flex;
	gap: 6px;
}
.squadron-item .resource-value{
	margin-left: auto;
}
.activity-task{
	flex: 1;
	overflow: hidden;
}

.tasks-list {
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.task-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 6px;
	gap: 6px;
}
.task-item.completed {
	border-color: rgba(var(--r), var(--g), var(--b), .2);
	background: rgba(0, 0, 0, .2);
}

.task-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.task-name {
	font-size: 14px;
	font-weight: 500;
}

.task-progress-bar {
	height: 8px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 4px;
	overflow: hidden;
}

.task-progress-text {
	font-size: 12px;
	color: var(--rgb);
	margin-right: auto;
}

.reward-funds {
	font-size: 12px;
}
.action-icon.activity{
	background-position: -112px -140px;
}
.reward-exp {
	font-size: 12px;
}
.btn.task-claim-btn {
	font-size: 12px;
	width: 56px;
	padding: 2px 0;
	border-radius: 6px;
}

.summary-item {
	display: flex;
	flex-direction: column;
}

.squadron-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}

.stat-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	overflow: hidden;
}
.stat-item::after{
	content: '';
	position: absolute;
	inset: 2px;
	background-color: rgba(0, 0, 0, .6);
	border-radius: 4px;
}

.stat-label {
	font-size: 12px;
	color:var(--color,#83c3c3);
	z-index: 1;
}
.stat-value {
	font-size: 14px;
	color: var(--color-minor);
	font-weight: 500;
	z-index: 1;
	margin-left: auto;
}
.mask-progress {
	position: absolute;
	inset: 0;
	background: rgba(var(--r), var(--g), var(--b), .3);
	border-radius: 6px;
}
.mask-fill {
	height: 100%;
	background: var(--color,var(--rgb));
}

.fuel {
	--color: #FF8C00;
}

.energy {
	--color: #00BFFF;
}

.materials {
	--color: #90EE90;
}

.contribution {
	--color:#FFD700;
}

.activity,.experience {
	--color:var(--rgb);
}
.medal{
	--color: #bbbbbb;
}
.squadron-announcement {
	
}

.attribute-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 6px;
	margin-bottom: 6px;
}

.attribute-name {
	color: #83c3c3;
	font-size: 13px;
}

/* 舰队成员页面样式 */
.members-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}
/* 舰队个人信息框 */
.personal-info-box {
	
}

.personal-info-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.personal-avatar {
}

.personal-details {
	flex: 1;
	height: 60px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.personal-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.personal-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-minor);
}
.personal-role {
	background: rgba(var(--r), var(--g), var(--b), .6);
	border-radius: 4px;
	font-size: 12px;
	padding: 2px 4px;
}
.personal-role-1 {
	color: #FFD700;
	background: rgba(255, 215, 0,.3);
}
.personal-role-2 {
	color: #FF8C00;
	background: rgba(255, 140, 0,.3);
}
.personal-role-3 {
	color: #00BFFF;
	background: rgba(0, 131, 255,.3);
}
.personal-role-4 {
	color: #90EE90;
	background: rgba(144, 238, 144,.3);
}
.personal-rank {
	font-size: 13px;
	color: #83c3c3;
}

/* 舰队设施页面样式 */

.facilities-resources {
	display: flex;
	gap: 12px;
	margin-left: auto;
}

.resource-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 6px;
}

.resource-icon {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	background-color: var(--color);
	z-index: 1;
}
.resource-name {
	color: #C0C6DD;
}
.resource-value {
	font-size: 12px;
	color: var(--color-minor);
}

.facilities-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	overflow-y: auto;
}

.facility-item {
	position: relative;
	padding: 16px;
}

.facility-item.locked {
	opacity: 0.6;
}

.facility-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.facility-icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: rgba(0, 0, 0, 0.4);
}

.facility-icon-1 {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 140, 0, 0.2));
}

.facility-icon-2 {
	background: linear-gradient(135deg, rgba(123, 104, 238, 0.3), rgba(75, 0, 130, 0.2));
}

.facility-icon-3 {
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(30, 144, 255, 0.2));
}

.facility-icon-4 {
	background: linear-gradient(135deg, rgba(75, 225, 216, 0.3), rgba(0, 139, 139, 0.2));
}

.facility-icon-5 {
	background: linear-gradient(135deg, rgba(255, 99, 71, 0.3), rgba(178, 34, 34, 0.2));
}

.facility-icon-6 {
	background: linear-gradient(135deg, rgba(50, 205, 50, 0.3), rgba(34, 139, 34, 0.2));
}

.facility-icon-7 {
	background: linear-gradient(135deg, rgba(238, 130, 238, 0.3), rgba(148, 0, 211, 0.2));
	background: linear-gradient(135deg, rgba(65, 105, 225, 0.3), rgba(30, 30, 100, 0.2));
}

.facility-info {
	flex: 1;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.facility-name {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.facility-level {
	font-size: 12px;
	color: #83c3c3;
}
.squadron-facility{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 4px;
}
.facility-buff-item{
	position: relative;
	border: 2px solid #FFE069;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
.facility-buff-time {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 9px;
	font-weight: 700;
	z-index: 10;
	line-height: 14px;
	font-family: system-ui;
	height: 12px;
	text-align: center;
	color: #000;
	background: #FFE069;
	border-radius: 0 4px 0 0;
	padding: 0 2px;
}
.maintenance-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.maintenance-info .cost-item{
	transition: all .2s ease;
	cursor: pointer;
}
.maintenance-info .cost-item:hover {
	color: var(--color-mian);
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}
.icon-config {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	transition: all .2s ease;
}
.icon-config:before {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: -2px;
	pointer-events: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -140px -140px;
	filter: sepia(200%) saturate(100) hue-rotate(170deg) brightness(1.1) contrast(1.1);
}

.facility-description {
	font-size: 13px;
	color: #83c3c3;
	line-height: 1.4;
}
.effects-container{
	
}
.effects-content {
	font-size: 14px;
	color: #75FBD6;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cost-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--color-minor);
}

.cost-item.insufficient {
	color: #FF6B6B;
}

.cost-icon {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	background-color: var(--color);
}

.facility-max-level {
	text-align: center;
	padding: 12px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 6px;
}

.max-level-text {
	font-size: 13px;
	color: #83c3c3;
}

/* 新设施样式 */
.facility-item.disabled {
	opacity: 1;
}

/* ==================== 舰队样式整理 ==================== */

.maintenance-status {
	padding: 4px 8px;
	background: rgba(0, 255, 0, 0.15);
	color: var(--rgb);
	border-radius: 4px;
	font-size: 12px;
}

.maintenance-status.inactive {
	background: rgba(255, 0, 0, 0.15);
	color: #FF6B6B;
}

.maintenance-status.warning {
	background: rgba(255, 200, 0, 0.15);
	color: #FFD700;
}

.effect-item {
	padding: 4px 0;
}

.facility-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.facility-actions .btn {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	justify-content: center;
}

.btn-main-text {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
}

.btn-sub-text {
	display: flex;
	gap: 8px;
	justify-content: center;
	background: rgba(0, 0, 0, .30);
	padding: 2px 4px;
	border-radius: 4px;
}
.btn-sub-text .cost-icon {
	width: 14px;
	height: 14px;
	font-size: 8px;
}

/* 维护设施模态框样式 */
.maintain-facility-info {
	
}

.maintain-facility-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-minor);
	margin-bottom: 8px;
}

.maintain-facility-desc {
	font-size: 13px;
	color: rgba(var(--r), var(--g), var(--b), .6);
}
/* 成员列表用户统计 */
.user-stats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.stat-tag {
	font-size: 11px;
	color: #83c3c3;
	padding: 2px 6px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.squadron-icon-box {
	display: flex;
	gap: 16px;
}
.squadron-search{
	flex:1;
	overflow: hidden;
}
.search-result {
	margin-top: 12px;
	overflow: hidden;
}

.squadron-search-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	max-height: 100%;
}

.squadron-search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
}

.squadron-search-info {
	flex: 1;
	min-width: 0;
}

.squadron-search-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.squadron-search-name {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.squadron-search-abbreviation {
	font-size: 12px;
	color: #888;
	flex-shrink: 0;
}

.squadron-search-level {
	font-size: 12px;
	color: #74F9BC;
	margin-top: 4px;
}

.squadron-search-members {
	font-size: 11px;
	color: #aaa;
	margin-top: 2px;
}
.icon-settings {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

.icon-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.patterns-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 68px);
	grid-template-rows: max-content;
	gap: 6px;
	--squadron-gradient:transparent;
	--squadron-color-1:transparent;
	--squadron-color-2:transparent;
	--squadron-pattern:var(--color-minor);
	--squadron-bg-pattern2:var(--color-minor);
}

.pattern-item {
	width: 60px;
	height: 60px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 6px;
	border: 2px solid var(--color-minor);
}

.pattern-item:hover{
	border-color:var(--color-mian);
}
.pattern-item.selected{
	border-color:var(--color-mian);
	--squadron-pattern:var(--color-mian);
	--squadron-bg-pattern2:var(--color-mian);
}
.pattern-color-list {
	display: flex;
}.pattern-color-input{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}.pattern-color-input label{
	font-size: 12px;
	color: #83c3c3;
}.pattern-color-input input[type="color"]{
	width: 32px;
	height: 32px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	background: transparent;
}

/* 舰队管理页面样式 */
.squadron-management-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
}

.announcement-input {
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	border-radius: 6px;
	padding: 8px;
	color: var(--color-minor);
	font-size: 13px;
	resize: vertical;
	margin-bottom: 12px;
}

/* 成员管理菜单样式 */
.member-management-menu {
	background: rgba(0, 0, 0, 0.9);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	min-width: 150px;
	padding: 4px;
}

.menu-item {
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s ease;
	color: var(--color-minor);
}

.menu-item:hover {
	background: rgba(75, 225, 216, 0.2);
	color: #75FBD6;
}

.menu-item.kick-member:hover {
	background: rgba(244, 67, 54, 0.2);
	color: #F44336;
}

@font-face {
	font-family: dd;
	src: url(../font/dd.ttf)
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	user-select: none
}

input {
	background: rgba(0, 0, 0, .6);
	outline: 0;
	border: 0;
	height: 20px;
	color: var(--color-minor);
	border-radius: 6px;
	padding: 2px 6px;
	font-family: "Roboto";
	font-weight: 500;
	min-width: 0;
	font-size: 14px;
}
textarea{
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	border-radius: 6px;
	padding: 8px;
	color: var(--color-minor);
	font-size: 14px;
	resize: vertical;
	margin-bottom: 12px;
}

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	border-radius: 4px
}

::-webkit-scrollbar-track {
	background-color: initial;
	border-radius: 4px
}

::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background-color: rgba(255, 255, 255, .8);
}

.hidden {
	display: none!important;
}

.overflow-y {
	overflow-y: scroll;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 28px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	transition: all .2s ease;
	border-radius: 8px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .2);
	background: #0B2A4E;
	display: flex;
	align-items: center;
}

.toggle-slider:before {
	transform: translateX(6px);
	content: "";
	height: 12px;
	width: 12px;
	transition: .3s;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	background-color: #83c3c3;
}

input:checked+.toggle-slider {
	border: 2px solid var(--rgb);
	background-image: linear-gradient(180deg, #092653, #096375);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

input:checked+.toggle-slider:before {
	background-color: #75FBD6;
	transform: translateX(35px);
	height: 18px;
	width: 18px;
	border-radius: 6px;
}

.slider-container {}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	outline: 0;
	padding: 0;
	margin-bottom: 12px
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--rgb);
	cursor: pointer;
	transition: all .2s ease;
	z-index: 2
}

.slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--rgb);
	cursor: pointer;
	transition: all .2s ease;
	z-index: 2
}

input:checked+.slider {
	background-color: var(--rgb)
}

input:checked+.slider:before {
	transform: translateX(26px)
}

.radio-group {
	position: relative;
	display: flex;
	border-radius: 6px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .2);
	background: #0B2A4E;
	color: #83c3c3;
	font-weight: 500;
	z-index: 1;
}

.radio-group input[type=radio] {
	display: none
}

.radio-group label {
	position: relative;
	cursor: pointer;
	transition: all .2s ease;
	text-align: center;
	user-select: none;
	font-size: 14px;
	padding: 4px;
	min-width: 32px;
	margin: -4px 0;
	border: 2px solid transparent;
	border-radius: 4px;
}

.radio-group label:hover {
	color: #75FBD6;
}

.radio-group input[type=radio]:checked+label {
	color: #75FBD6;
	border-color: var(--rgb);
	background-image: linear-gradient(180deg, #092653, #096375);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.radio-group.rewardsPo {
	display: grid;
	grid-template-columns: repeat(2, 44px);
	padding: 4px;
}

.radio-group.rewardsPo label {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}
.radio-group .premium {
	color: #FFE069;
}
.radio-group .disband {
	color: #aaa;
	text-decoration: line-through;
}
.center-tip {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	background: url(../images/bg.png) #150D3E;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	color: var(--color-minor);
	font-family: 'dd', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	width: 100%;
	height: 100%;
}

.loadingMask {
	position: fixed;
	z-index: 999;
	background: rgba(0, 0, 0, .7);
	backdrop-filter: blur(5px);
	inset: 0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity .2s ease;
}

.loading-mask {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px
}

.loading-mask .btn {
	padding: 8px 12px;
}

.container {
	position: relative;
	display: flex;
	height: 100%;
	width: 100%;
	margin: 0 auto;
}

.container::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url(../images/bh.png) no-repeat center;
	pointer-events: none;
	z-index: -10;
}

.bg-star-1,
.bg-star-2 {
	position: absolute;
	pointer-events: none;
	z-index: -9;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bg-star-1:after,
.bg-star-1:before,
.bg-star-2:after,
.bg-star-2:before {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	background-repeat: no-repeat;
}

.bg-star-1 {
	background-image: url(../images/star_5.png);
	margin: 0 50% 20% 0;
	background-position: 80% 20%;
}

.bg-star-1::after {
	background-image: url(../images/star_1.png);
	padding: 230px 40px;
	background-position: bottom left;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}

.bg-star-2::after {
	background-image: url(../images/star_2.png);
	padding: 190px 190px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
}

.bg-star-1::before {
	background-image: url(../images/star_3.png);
	padding: 397px 0 0 618px;
	background-position: bottom right;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}

.bg-star-2::before {
	background-image: url(../images/star_4.png);
	padding: 132px 323px;
	background-position: bottom left;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6))
}

.header {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	margin-bottom: 6px;
	border-radius: 8px;
	box-shadow: inset 0px 0px 6px #fff, 0 0 20px #000;
	padding: 4px;
	background: url(../images/header.png) 0% 0% / contain;
	overflow: hidden;
}

.header::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 200%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%) 0% 0% / 100% 5px;
}

body[data-effect="1"] .header::before {
	animation: scrollMask 2s linear infinite;
}

@keyframes scrollMask {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-10px);
	}
}

.header::after {
	content: "";
	position: absolute;
	box-shadow: var(--rgb) 0px -16px 16px inset;
	pointer-events: none;
	opacity: 0.4;
	z-index: -1;
	inset: 0px;
	border: 2px solid var(--rgb);
	border-radius: 8px;
}

.action-title {
	display: flex;
	align-items: center;
	gap: 4px;
}

.active-container {
	display: flex;
	flex-grow: 1;
	gap: 2px;
	z-index: 5;
}

.action-name {
	color: #e0f8ff;
	text-shadow: 0 0 3px rgba(0, 243, 255, .7);
	font-family: system-ui;
	font-size: 14px;
	font-weight: 700;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.action-count {
	color: #fff;
	font-size: 12px;
	padding: 0 4px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background-color: rgba(0, 0, 0, .5);
	border-radius: 4px;
	text-shadow: 0 0 3px #fff9c2;
	display: flex;
	align-items: center;
}

.action-count .time {
	margin-left: 4px;
	padding-left: 4px;
	border-left: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.toolbar-container {
	background: rgba(0, 0, 0, 0.45);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
	z-index: 5;
}

.toolbar-container:after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -4px;
	border-bottom: 2px solid var(--rgb);
	opacity: .5;
}

.hide-active .active-container,
.hide-active .toolbar-container:after {
	display: none;
}

.hide-active .toolbar-container {
	margin-bottom: 0;
}

.left-entry {
	display: flex;
	align-items: center;
}

.toolbar-icon {
	position: relative;
	background: url(../images/icon.png) no-repeat;
	background-position: -166px -26px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 5;
}

.clock {
	color: #75FBD6;
	margin-right: 8px;
}

.btn.checkIn-btn {
	position: relative;
	width: 48px;
	border-radius: 4px;
	padding: 0;
	margin-left: auto;
	line-height: 16px;
}

.btn.checkIn-btn.completed {
	opacity: 1;
	background: rgb(75 225 216 / 50%);
	color: var(--color-mian);
	box-shadow: 0 0 15px rgba(85, 84, 70, .7);
	font-size: 12px;
}

.event {
	display: flex;
	gap: 4px;
	margin-left: auto;
	height: 36px;
}

.event-item {
	position: relative;
	border: 2px solid #FFE069;
	background: #0D0D33;
	border-radius: 4px;
	width: 26px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-level {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFE069;
	color: #000;
	font-size: 9px;
	font-weight: 700;
	z-index: 10;
	line-height: 1;
	font-family: system-ui;
	height: 8px;
	text-align: center;
}

.level-info {
	margin-top: 4px;
	padding: 4px 8px;
	background: rgba(255, 224, 105, 0.2);
	border-radius: 4px;
	font-size: 12px;
	color: #FFE069;
}

.event-item::after {
	content: '';
	position: absolute;
	inset: 5px;
	width: 16px;
	height: 16px;
	background-image: url(../images/icon.png);
}

.event-item-1::after {
	background-position: -202px -34px;
}

.event-item-2::after {
	background-position: -258px -34px;
}

.event-item-3::after {
	background-position: -202px -90px;
}

.event-item-4 {
	border-color: #00D4FE;
}

.event-item-4::after {
	background-position: -258px -90px;
}

.event-item-100 {
	border-color: #75FBD6;
}

.event-item-100::after {
	background-position: -230px -90px;
}
.event-item-100 .event-level{
	background: #75FBD6;
}

.main-content {
	position: relative;
	flex: 1;
	display: flex;
	overflow: hidden;
}

.neon {
	position: relative;
	border: 2px solid var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	background-image: linear-gradient(180deg, rgba(9, 38, 83, .6), rgba(9, 99, 117, .6));
	border-radius: 8px;
}

.neon:after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: 2;
	border-radius: 4px;
	box-shadow: inset var(--rgb) 0 0 8px;
	pointer-events: none;
}

.neon-title {
	position: relative;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	padding: 6px 10px 6px 36px;
	color: #75FBD6;
	font-weight: 500;
	line-height: 20px;
	display: flex;
}
.neon-title:after{
	content: '';
	position: absolute;
	left: 6px;
	top: 0px;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	background-position: -168px -28px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.neon-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .3);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}


.icon-help {
	background: var(--rgb);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	font-size: 12px;
	color: #000;
}

.sidebar {
	display: flex;
	flex-direction: column;
	width: 300px;
	margin: 6px;
}

.sidebar-logo {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 28px;
	font-weight: 500;
	color: #e0f8ff;
	text-align: center;
	letter-spacing: 2px;
	background-image: url(/static/images/cucoloris.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	height: 130px;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	background-position: center 10px;
	padding: 10px;
	text-shadow: 0 0 10px rgba(0, 0, 0, .7);
}

.sidebar-logo:before {
	content: '';
	position: absolute;
	top: -65px;
	left: 50%;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #000;
	border: 2px solid #34FFFC;
	box-shadow: 0 0 16px #34FFFC;
	z-index: -1;
	margin-left: -75px;
}

.sidebar-logo:after {
	content: '';
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	bottom: 8px;
	width: 161px;
	height: 38px;
	border-radius: 4px;
	z-index: -1;
	filter: blur(5px);
}

.sidebar-menu {
	padding: 0 8px;
	gap: 4px;
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: auto;
}

.sidebar-toolbar {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
}

.sidebar-view-toggle {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	transition: all .2s ease;
	margin: 8px;
}

.sidebar-view-toggle:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	border-color: var(--rgb);
}

.sidebar-view-toggle.active {
	background-color: rgba(var(--r), var(--g), var(--b), .25);
	border-color: var(--rgb);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

/* 竖排图标（三条横线） */
.sidebar-view-toggle::before {
	content: '';
	position: absolute;
	left: 6px;
	right: 6px;
	top: 7px;
	height: 2px;
	border-radius: 2px;
	background: var(--rgb);
	box-shadow: 0 7px 0 var(--rgb), 0 14px 0 var(--rgb);
}

/* 格子图标（四个方块） */
.sidebar-view-toggle.active::before {
	left: 6px;
	right: auto;
	top: 6px;
	width: 8px;
	height: 8px;
	box-shadow: 10px 0 0 var(--rgb), 0 10px 0 var(--rgb), 10px 10px 0 var(--rgb);
}

.sidebar-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sidebar-group-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 格子布局：父级分组下的 sidebar-item 并列 */
.sidebar-menu.sidebar-grid .sidebar-group-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
}

.sidebar-menu.sidebar-grid .sidebar-item {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	padding: 8px 6px;
	gap: 4px;
}

.sidebar-menu.sidebar-grid .sidebar-item:after {
	position: static;
	margin: 8px auto;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
}

.sidebar-menu.sidebar-grid .sidebar-item-name {
	flex-direction: column;
	gap: 2px;
	width: 100%;
	text-align: center;
	align-items: center;
	font-size: 12px;
}
.sidebar-menu.sidebar-grid .sidebar-item-name .sidebar-item-name-progress{
	font-size: 10px;
}

.sidebar-menu.sidebar-grid .sidebar-item-progress {
	position: absolute;
	margin: 0;
	inset: -2px;
	height: auto;
	width: auto;
	border-radius: 6px;
	overflow: hidden;
	z-index: -1;
}

.sidebar-menu.sidebar-grid .sidebar-item-progress .sidebar-item-progress-bar{
	opacity: .6;
}
.sidebar-item {
	position: relative;
	padding: 8px 10px 8px 42px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s ease;
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}

.sidebar-item:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	border-color: rgba(var(--r), var(--g), var(--b), .3);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .2);
	background-color: rgba(var(--r), var(--g), var(--b), .25);
}

.sidebar-item:before {
	content: '';
	position: absolute;
	inset: 2px;
	box-shadow: inset var(--rgb) 0 0 8px 0px;
	z-index: -1;
	border-radius: 4px;
	opacity: 0;
	transition: all .2s ease;
}

.sidebar-item.active:before {
	opacity: 1;
}

.sidebar-item:after {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -14px;
	left: 8px;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.action-icon-slackin {
	background-position: -168px -56px;
}

.action-icon-0,
.sidebar-item.action-0:after {
	background-position: -28px -56px;
}

.action-icon-1,
.sidebar-item.action-1:after {
	background-position: -56px -56px;
}

.action-icon-2,
.sidebar-item.action-2:after {
	background-position: -84px -56px;
}

.action-icon-3,
.sidebar-item.action-3:after {
	background-position: -28px -168px;
}

.action-icon-4,
.sidebar-item.action-4:after {
	background-position: 0 -168px;
}

.action-icon-6,
.sidebar-item.action-6:after {
	background-position: -112px -56px;
}

.action-icon-7,
.sidebar-item.action-7:after {
	background-position: -252px -140px;
}

.action-icon-8,
.sidebar-item.action-8:after {
	background-position: -140px -56px;
}

.action-icon-9 {
	background-position: -224px -56px;
}

.sidebar-item.action-101:after {
	background-position: -196px -56px;
}
.sidebar-item.action-102:after {
	background-position: -84px -84px;
}

.action-icon-200,
.sidebar-item.action-200:after {
	background-position: -252px -56px;
}

.action-icon-201,
.sidebar-item.action-201:after {
	background-position: 0 -84px;
}

.sidebar-item.action-701:after {
	background-position: -140px -84px;
}
.sidebar-item.action-702:after {
	background-position: -112px -84px;
}
.sidebar-item.action-801:after {
	background-position: -252px -112px;
}
.sidebar-item.action-802:after {
	background-position: 0 -140px;
}
.sidebar-item.action-803:after {
	background-position: -28px -140px;
}
.action-icon-time {
	background-position: -168px -84px;
}

.action-icon-proficiency {
	background-position: -28px -84px;
}
.action-icon-exp {
	background-position: -56px -84px;
}

.sidebar-item.active {
	background-color: rgba(var(--r), var(--g), var(--b), .25);
	border-color: var(--rgb);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.sidebar-item-name {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.sidebar-item-progress {
	width: 100%;
	height: 4px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	margin-top: 6px;
}

.sidebar-item-progress-bar {
	background: var(--rgb);
	height: 100%;
}

.sidebar-item .tip-container {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	gap: 4px;
}

.sidebar-item .tip {
	background: #FF0;
	border-radius: 8px;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	color: #856b1c;
	box-shadow: 0 0 9px 0 rgb(255 255 0);
	border: 2px solid #fff;
	position: static;
}

.sidebar-bottom {
	position: relative;
	padding: 6px;
	color: #75FBD6;
	font-weight: 500;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.sidebar-bottom-text {
	margin-right: auto;
	font-size: 12px;
	color: rgba(var(--r), var(--g), var(--b), .6);
	margin-left: 2px;
}

.sidebar-btn {
	position: relative;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}

.sidebar-btn.active {
	background-color: rgba(var(--r), var(--g), var(--b), .25);
	border-color: var(--rgb);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.chat-private {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: all .2s ease;
}

.chat-private:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}
.chat-private.chat-private-flash {
	animation: chat-private-flash-anim 0.6s ease 0s 3;
}
@keyframes chat-private-flash-anim {
	0% { transform: scale(1); box-shadow: none; }
	30% { transform: scale(1.2); box-shadow: 0 0 12px rgba(var(--r), var(--g), var(--b), .9); background: rgba(var(--r), var(--g), var(--b), .35); }
	60% { transform: scale(0.95); }
	100% { transform: scale(1); box-shadow: none; }
}
.chat-private-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 14px;
	height: 14px;
	padding: 0 4px;
	background: #e74c3c;
	color: #fff;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	border-radius: 10px;
	font-weight: bold;
}

.chat-private:before {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: -2px;
	pointer-events: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -28px -28px;
}
.icon-setting {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: all .2s ease;
}

.icon-setting:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.icon-setting:before {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: -2px;
	pointer-events: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -140px -28px;
}

.main-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 6px 0;
	min-width: 0;
}

.content {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.page {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
}
.page-title {
	position: relative;
	flex: 1;
	max-width: 300px;
	border-radius: 8px;
	color: #fff;
	padding: 8px 4px 6px;
	border: 2px solid var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	background-image: linear-gradient(180deg, rgba(9, 38, 83, .6), rgba(9, 99, 117, .6));
}

.page-title:after {
	content: '';
	position: absolute;
	inset: 2px;
	box-shadow: inset var(--rgb) 0 0 8px 0px;
	z-index: -1;
	border-radius: 4px;
}

.page-name {
	position: relative;
	padding: 6px 10px;
	color: #75FBD6;
	font-weight: 500;
	display: inline;
}

.page-progress {
	position: relative;
	height: 4px;
	background: rgba(117, 251, 213, .2);
	margin: 4px 10px;
}

.page-progress .progress {
	position: absolute;
	right: 0;
	top: -22px;
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
	color: #75FBD6;
}

.level_max {
	color: rgba(var(--r), var(--g), var(--b), .6);
}

.page-progress-bar {
	background: #75fbd5;
	height: 100%;
}
.page-content-header {
	display: flex;
	gap: 12px;
	align-items: center;
}
.actions .page-name {
	color: #75FBD6;
}

.action-tab {
	display: flex;
	gap: 8px;
}

.actions-list {
	flex: 1;
	overflow: hidden auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 6px;
}

.actions-list-group {}

.actions-list-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
	gap: 12px;
}

.page-content {
	position: relative;
	padding: 16px;
	flex: 1;
	overflow: auto;
}

.home-apps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	padding-top: 2px;
	overflow-y: scroll;
}

.home-app {
	position: relative;
	border-radius: 8px;
	padding: 10px;
	min-height: 120px;
	position: relative;
	background: linear-gradient(326deg, #FF5722, #c34aa8);
	margin-top: 18px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 9px rgb(0 0 0 / 60%);
	-webkit-transition: transform .3s;
	transition: transform .3s;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	cursor: pointer;
}

.home-app:after {
	content: '';
	position: absolute;
	width: 118px;
	z-index: -1;
	background-image: url(/static/images/npc.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	right: 10px;
	top: -17px;
	padding-bottom: 17px;
	height: 100%;
	width: 90px;
	background-size: cover;
	filter: drop-shadow(7px 0 rgba(0, 0, 0, .3));
}

.home-app:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image: linear-gradient(215deg, transparent 30%, #ca1ed5);
	opacity: .6;
	z-index: 1;
}

.home-app:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
}

.app-title {
	font-weight: 500;
	position: absolute;
	left: 8px;
	bottom: 8px;
	font-size: 22px;
	text-shadow: 0 0 4px rgba(0, 0, 0, .7);
	z-index: 2;
}

.home-app.shop {
	background: linear-gradient(312deg, #EC7044, #F6D967);
}

.home-app.shop:after {
	width: 95px;
	background-image: url(/static/images/npc_001.png);
}

.home-app.shop:before {
	background-image: linear-gradient(215deg, transparent 30%, #EC7044);
}

.home-app.mail {
	background: linear-gradient(312deg, #EB5AF7, #E3C383);
}

.home-app.mail:after {
	width: 118px;
	background-image: url(/static/images/npc_002.png);
}

.home-app.mail:before {
	background-image: linear-gradient(215deg, transparent 30%, #EB5AF7);
}

.home-app.mall {
	background: linear-gradient(312deg, #2196F3, #00d49b);
}

.home-app.mall:after {
	width: 85px;
	background-image: url(/static/images/npc_003.png);
}

.home-app.mall:before {
	background-image: linear-gradient(215deg, transparent 30%, #2196F3);
}

.home-app.upgrade {
	background: linear-gradient(312deg, #6507F0, #FCB1E0);
}

.home-app.upgrade:after {
	width: 154px;
	right: 7px;
	background-image: url(/static/images/npc_004.png);
}

.home-app.upgrade:before {
	background-image: linear-gradient(215deg, transparent 30%, #6507F0);
}

.home-app.hack {
	background: linear-gradient(312deg, #9C27B0, #3F51B5);
}

.home-app.hack:after {
	width: 120px;
	right: 7px;
	background-image: url(/static/images/npc_005.png);
	animation: cyberpunkDestruction 5s infinite;
}

@keyframes cyberpunkDestruction {

	0%,
	12%,
	15%,
	46%,
	49%,
	82%,
	85%,
	100% {
		filter: drop-shadow(7px 0 rgba(0, 0, 0, 0.3));
		transform: translateX(0);
	}

	13% {
		filter: drop-shadow(15px 5px rgba(255, 0, 255, 0.9)) drop-shadow(-10px -5px rgba(0, 255, 255, 0.9)) blur(1px);
		transform: translateX(5px);
	}

	14% {
		filter: drop-shadow(-10px 8px rgba(255, 255, 0, 0.8)) drop-shadow(10px -8px rgba(0, 255, 0, 0.8)) blur(2px);
		transform: translateX(-3px);
	}

	47% {
		filter: drop-shadow(5px -7px rgba(255, 0, 0, 0.7)) drop-shadow(-5px 7px rgba(0, 0, 255, 0.7));
		transform: translateX(2px);
	}

	48% {
		filter: drop-shadow(12px 0 rgba(0, 0, 0, 0.3));
		transform: translateX(-1px);
	}

	83% {
		filter: drop-shadow(0 10px rgba(255, 100, 255, 0.6)) drop-shadow(0 -10px rgba(100, 255, 255, 0.6));
		transform: translateX(0) skewX(5deg);
	}

	84% {
		filter: drop-shadow(7px 0 rgba(0, 0, 0, 0.3));
		transform: translateX(0) skewX(0);
	}
}

.home-app.hack:before {
	background-image: linear-gradient(215deg, transparent 30%, #000);
}

.home-app.news {
	background: linear-gradient(312deg, #FF9800, #F44336);
}

.home-app.news:after {
	width: 100px;
	right: 8px;
	background-image: url(/static/images/npc_006.png);
}

.home-app.news:before {
	background-image: linear-gradient(215deg, transparent 30%, #FF5722);
}

.app-tip {
	background: #FFFE65;
	border-radius: 4px;
	padding: 0px 6px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	color: #856b1c;
	position: absolute;
	right: -4px;
	top: -4px;
	font-size: 14px;
	font-weight: 700;
	font-family: system-ui;
	z-index: 1;
}

.page-tab {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.page-tab-item {
	position: relative;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s ease;
	color: rgba(var(--r), var(--g), var(--b), .8);
	background-color: rgba(0, 0, 0, .5);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	text-align: center;
	white-space: nowrap;
	flex-shrink: 0;
	backdrop-filter: blur(6px);
}

.page-tab-item:hover {
	border-color: rgba(var(--r), var(--g), var(--b), .8);
}

.page-tab-item.active {
	color: #75FBD6;
	border-color: var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	z-index: 0;
}

.page-tab-item:before {
	content: '';
	position: absolute;
	inset: 2px;
	box-shadow: inset var(--rgb) 0 0 8px 0px;
	z-index: -1;
	border-radius: 4px;
	opacity: 0;
	transition: all .2s ease;
}

.page-tab-item.active:before {
	opacity: 1;
}

.page-tab-item span {
	position: relative;
	z-index: 2;
}



.marketplace-page {
	flex: 1;
	padding: 8px;
	display: flex;
	overflow: hidden;
}

.marketplace-content.active {
	display: flex;
}

.marketplace-content {
	display: none;
	flex: 1;
	overflow: hidden;
	flex-direction: column;
}

.neon-tabs.ui-tab {
	margin: 0;
}

.marketplace-list {
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
	margin: 6px;
}

.marketplace-list-header {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 2px;
}

.marketplace-search {
	position: relative;
	color: #fff;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .5);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.marketplace-search:after {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: 2px;
	pointer-events: none;
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
	background-position: -56px -28px;
}

.marketplace-search-input {
	position: absolute;
	border-radius: 6px 6px 0 0;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .6);
	left: 2px;
	height: 36px;
	z-index: 10;
	right: 0;
	padding: 0 6px;
}

.marketplace-search-list {
	position: absolute;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .6);
	left: 2px;
	min-height: 36px;
	z-index: 10;
	right: 0;
	padding: 6px;
	top: 40px;
	background: rgba(0, 0, 0, .8);
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: scroll;
}

.marketplace-search-list .empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--r), var(--g), var(--b), .6);
}

.marketplace-search-item {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all .2s ease;
}

.marketplace-search-item:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .3);
}

.marketplace-search-item .item {
	width: 30px;
	height: 30px;
	border-width: 1px;
}

.marketplace-search-item .itemicon {
	transform: scale(1);
}
.marketplace-grid-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.marketplace-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: start;
	gap: 4px;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.marketplace-item {
	cursor: pointer;
}

.marketplace-good-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.marketplace-good-item {
	display: flex;
	gap: 8px;
}

.detailed-item-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.marketplace-item-title {
	display: flex;
	gap: 4px;
}

.detailed-item-info .name {
	font-size: 24px;
	font-weight: 500;
}

.marketplace-favorite {
	position: relative;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: rgba(var(--r), var(--g), var(--b), .6);
	cursor: pointer;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	font-size: 14px;
	justify-content: space-evenly;
	transition: all .2s ease;
}

.marketplace-favorite:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .3);
}

.marketplace-favorite.active {
	color: #75FBD6;
}

.marketplace-favorite:before {
	content: '';
	background-color: transparent;
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -112px -28px;
	transition: all .2s ease;
	opacity: .4;
}

.marketplace-favorite:hover:before {
	opacity: .5;
}

.marketplace-favorite.active:before {
	opacity: 1;
}

.marketplace-good-function {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.btn.marketplace-btn {
	min-width: 40px;
	border: 0;
	padding: 2px 4px;
	font-size: 14px;
	border-radius: 4px;
}

.btn.marketplace-btn.new-marketplace-btn {
	margin-left: auto;
}

.marketplace-orderBook {
	flex: 1;
	overflow: hidden;
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.marketplace-orderBook-item {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.marketplace-orderBook-title {
	color: #75FBD6;
	display: flex;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-width: 2px 0 2px;
}

.marketplace-orderBook-title>div {
	flex: 1;
	text-align: center;
	padding: 8px;
	font-weight: 500;
	overflow: hidden;
}

.marketplace-orderBook-list {
	overflow-y: scroll;
}

.marketplace-orderBook-info {
	display: flex;
	align-items: center;
	position: relative;
}

.marketplace-orderBook-info:nth-child(2n) {
	background-color: rgba(0, 0, 0, .2)
}

.marketplace-orderBook-info>div {
	flex: 1;
	text-align: center;
	padding: 4px 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

.marketplace-orderBook-info .info {
	z-index: 3;
}

.marketplace-orderBook-info .type {
	background: #75FBD6;
	border-radius: 4px;
	line-height: 12px;
	font-size: 12px;
	padding: 2px;
	color: #333;
	font-weight: 500;
}

.marketplace-orderBook-info .type.type-2 {
	background: #FF4B88;
}

.marketplace-orderBook-info .state-time.waiting {
	color: #FFE069;
}

.marketplace-orderBook-info .state-time.expired {
	color: #ccc;
}

.prog-bar {
	width: 80%;
	height: 4px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	margin-bottom: 6px;
}

.prog-bar span {
	display: block;
	background: var(--rgb);
	height: 100%;
}

.marketplace-orderBook-info .btns {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.marketplace-cancel {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 10;
}

.marketplace-cancel-fee .send-back {
	color: var(--rgb);
}

.marketplace-cancel-fee .not-back {
	color: #ff6570;
}

.loading-tip {
	text-align: center;
	padding: 12px;
}

.marketplace-modal-content {
	width: 360px !important;
}

.marketplace-my-header {
	display: flex;
	gap: 8px;
	padding: 8px;
}

.marketplace-my-count {
	display: flex;
	gap: 8px;
}

.marketplace-my-orderBook {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.marketplace-my-orderBook-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, .2);
	border-radius: 8px;
	overflow: hidden;
}

/* 按钮样式 */
.btn {
	border: 0;
	cursor: pointer;
	font-family: system-ui;
	font-size: 14px;
	transition: all .2s ease;
	position: relative;
	align-items: center;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	text-align: center;
	padding:4px 8px;
	color: #333;
	font-weight: 500;
	padding-block: 1px;
	padding-inline: 6px;
	box-sizing: border-box;
	background: var(--color-mian);
	border: 2px solid var(--color-mian);
	opacity: .7;
}

.btn:hover {
	opacity: 1;
}

.btn.disabled,
.btn[disabled] {
	cursor: not-allowed;
	background: rgba(var(--r), var(--g), var(--b), .2);
	color: rgba(var(--r), var(--g), var(--b), .6);
	border-color: rgba(var(--r), var(--g), var(--b), .6);
}

.btn.danger-btn {
	border-color: #FF4444;
	background: #FF4444;
}

.noen-btn {
	padding: 6px 12px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(0, 0, 0, .3);
	color: rgba(var(--r), var(--g), var(--b), .8);
	opacity: 1;
}

.noen-btn:hover {
	border-color: rgba(var(--r), var(--g), var(--b), .8);
	color: #75FBD6;
}

.s-btn {
	min-width: 40px;
	padding: 2px 6px;
	font-size: 14px;
	border-radius: 4px;
}
.mini-btn {
	min-width: 40px;
	padding: 0 4px;
	width: 50px;
	font-size: 14px;
	border-radius: 4px;
}
/*inventory*/
.inventory {
	overflow: hidden;
	margin: 6px;
	width: 356px;
	display: flex;
	flex-direction: column;
}
.ui-tab.inventory-main-tabs{
	margin: 8px;
}
.inventory .neon-title {
	padding-bottom: 8px;
}
.inventory-main-content {
	display: flex;
	flex: 1;
	margin: 0 8px;
	overflow: hidden;
}
.main-content-item {
	flex: 1;
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.main-content-item.active {
	display: flex;
}
.equipment-section {
	flex-direction: column;
	align-items: center;
	transition: height .3s ease;
}
.cargo-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cargo-content {
	display: block;
	position: relative;
	flex: 1;
	overflow: hidden;
}

.inventory-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: center;
	gap: 4px;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.inventory-item,
.selector-item {
	cursor: pointer;
}

.updateItemEffect {
	animation: updateItemEffect .3s ease-out;
}

@keyframes updateItemEffect {
	0% {
		transform: scale(2.5);
	}

	100% {
		transform: scale(2)
	}
}
.collection-section,
.avatar-section{
	flex-direction: column;
	align-items: center;
	color: rgba(var(--r), var(--g), var(--b), .5);
	flex: 1;
	justify-content: center;
}
.inventory-bottom {
	display: flex;
	padding: 8px;
	gap: 8px;
}

.currency-item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px;
	padding: 4px 6px;
	height: 28px;
	color: rgba(var(--r), var(--g), var(--b), .8);
	background-color: rgba(0, 0, 0, .3);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}

.currency-item .itemicon {
	transform: scale(1);
}

.item {
	position: relative;
	width: 60px;
	height: 62px;
	transition: all .2s ease;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
	--border: #fff;
	overflow: hidden;
	background-color: rgba(from var(--border) r g b / 0.3);
	background-color: color-mix(in srgb, var(--border) 30%, transparent);
}

.item:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.item.menu-active::after,
.item.selector-active::after,
.item.favorite::after {
	opacity: 1;
}

.item::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	bottom: 0px;
	border-radius: 0 0 6px 6px;
	padding-bottom: 2px;
	background: var(--border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.item::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: all .2s ease;
	box-shadow: inset -2px 0 #75FBD6, inset 0 2px #75FBD6, inset 2px 0 #75FBD6;
	opacity: 0;
	pointer-events: none;
	z-index: 12;
	border-radius: 6px;
}

.item.favorite::after {
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-position: -112px -28px;
	box-shadow: unset;
	inset: unset;
	right: 0;
	top: 0;
	filter: hue-rotate(235deg) saturate(3) brightness(1.2) drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
}

.item-rarity-0 {
	--border: #aaa !important;
}

.item-rarity-1 {
	--border: #92F75B !important;
}

.item-rarity-2 {
	--border: #00D4FE !important;
}

.item-rarity-3 {
	--border: #a846f0 !important;
}

.item-rarity-4 {
	--border: #F74A82 !important;
}

.item-rarity-5 {
	--border: #F7D732 !important;
}

.item-rarity-6 {
	background-image: linear-gradient(0deg,
			rgba(233, 185, 241, .3),
			rgba(151, 159, 239, .3),
			rgba(145, 245, 241, .3),
			rgba(232, 248, 209, .3),
			rgba(247, 161, 218, .3),
			rgba(232, 248, 209, .3),
			rgba(145, 245, 241, .3),
			rgba(151, 159, 239, .3),
			rgba(233, 185, 241, .3));
	background-size: 300% 200%;
	animation: diagonalFlow 5s linear infinite;
	filter: drop-shadow(0 1px rgba(255, 255, 255, 0.3));
	box-shadow: inset #fff 0 0 4px 1px, inset rgba(0, 0, 0, .3) 0 -2px 4px 2px, 0 4px 8px rgba(0, 0, 0, .3);
}

@keyframes diagonalFlow {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 0 200%;
	}
}

.item-rarity-6::before {
	background-image: linear-gradient(90deg, #E9B9F1, #979FEF, #91F5F1, #E8F8D1, #F7A1DA, #E8F8D1, #91F5F1, #979FEF, #E9B9F1);
	background-size: 200% 100%;
	animation: gradientScroll 5s linear infinite;
}

@keyframes gradientScroll {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.mini-item.item-rarity-6:after {
	z-index: 0;
	border-radius: 4px;
}

.item-icon {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	pointer-events: none;

}

.item-quantity {
	position: absolute;
	right: 2px;
	bottom: 2px;
	z-index: 10;
	display: flex;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-size: 12px;
	color: #fff;
	font-weight: 500;
	pointer-events: none;
}

.item-extra {
	position: absolute;
	left: 1px;
	top: 1px;
	z-index: 10;
	display: flex;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-size: 12px;
	color: #fff;
	font-weight: 500;
	pointer-events: none;
}

.item-enhancement {
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 0 0 0 6px;
	height: 14px;
	padding: 2px 4px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
	line-height: 14px;
	text-shadow: unset;
	background: #000;
	font-size: 12px;
	z-index: 11;
	font-weight: 700;
	pointer-events: none;
}

.enhancement-0 {
	color: #fff;
}

.enhancement-1 {
	color: #92F75B;
}

.enhancement-2 {
	color: #00D4FE;
}

.enhancement-3 {
	color: #FF4CFF;
}

.enhancement-4 {
	color: #FF4B88;
}

.enhancement-5 {
	color: #FEDD33;
}

.item-id {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border-radius: 4px;
	font-size: 9px;
	font-family: system-ui;
	color: #0f0;
	font-weight: 700;
	background: rgba(0, 0, 0, .8);
	z-index: 11;
	pointer-events: none;
	opacity: 0;
}

.equipment-content {
	display: block;
	position: relative;
	overflow: hidden;
}

.job.job-1 {
	background-position: -28px -112px;
}

.job.job-2 {
	background-position: -56px -112px;
}

.job.job-3 {
	background-position: -84px -112px;
}

.job.job-4 {
	background-position: -112px -112px;
}

.job.job-5 {
	background-position: -140px -112px;
}.equipment-slots{
	display: grid;
	vertical-align: top;
	grid-template-columns: repeat(5, 60px);
	grid-gap: 4px;
	justify-content: center;
	overflow: auto;
}

.ui-tab.equipment-page-tab {
	display: flex;
	margin: 2px;
	align-self: unset;
}

.equipment-slots {
	position: absolute;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.equipment-slots.active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.equipment-slot {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 6px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

.equipment-slot.empty {
	background: rgba(0, 0, 0, .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
}

.equipment-slot.empty:after {
	position: absolute;
	content: '';
	inset: 0;
	border-bottom: 2px solid #fff;
	border-radius: 6px;
	opacity: .3;
}

.equipment-slot.empty:before {
	position: absolute;
	content: '';
	inset: 20px;
	background:
		linear-gradient(45deg, transparent 45%, rgb(var(--r), var(--g), var(--b)) 45%, rgb(var(--r), var(--g), var(--b)) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, rgb(var(--r), var(--g), var(--b)) 45%, rgb(var(--r), var(--g), var(--b)) 55%, transparent 55%);
	opacity: .3;
}

.slot-name {
	color: rgba(var(--r), var(--g), var(--b), .6);
	z-index: 6;
	font-size: 12px;
	padding: 28px 28px 4px 4px;
	font-family: system-ui;
	text-align: left;
	user-select: none;
	display: flex;
	align-items: flex-end;
	height: 24px;
	width: 24px;
}

.slot-name:before {
	content: "";
	position: absolute;
	inset: 6px;
	transition: all .2s ease;
	background: linear-gradient(to right, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) top left, linear-gradient(to left, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) top right, linear-gradient(to right, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) bottom left, linear-gradient(to left, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) bottom right, linear-gradient(to bottom, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) top left, linear-gradient(to top, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) bottom left, linear-gradient(to bottom, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) top right, linear-gradient(to top, rgb(var(--r), var(--g), var(--b)) 10px, transparent 10px) bottom right;
	background-repeat: no-repeat;
	background-size: 40px 2px, 40px 2px, 40px 2px, 40px 2px, 2px 40px, 2px 40px, 2px 40px, 2px 40px;
	pointer-events: none;
	z-index: 12;
	opacity: .3;
}

.slot-name:after {
	content: "";
	position: absolute;
	inset: 0;
	transition: all .2s ease;
	box-shadow: inset -2px 0 #75FBD6, inset 0 2px #75FBD6, inset 2px 0 #75FBD6;
	opacity: 0;
	pointer-events: none;
	z-index: 12;
	border-radius: 6px;
}

.equipment-slot.selector-active .slot-name:after {
	opacity: 1;
}

.action-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.action-progress {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 2px;
}

.progress-container {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 16px;
	border-radius: 4px;
	border: 2px solid #000;
	background: rgba(0, 0, 0, .6);
}

.progress-container.hidden {
	display: none;
}

.progress-bar span {
	position: absolute;
	left: 0;
	right: 0;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.slackin .progress-bar {
	position: relative;
	background: linear-gradient(45deg, #00b4db, #0083b0, #00b4db, #0083b0, #00b4db);
	background-size: 200% 200%;
	animation: slackin 5s linear infinite;
	box-shadow: 0 0px 10px #0083b0;
	border-radius: 2px;
	outline: 1px solid #00b4db;
}

.slackin .progress-bar:after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(315deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: reflectionFlash 5s ease-in-out infinite;
}

.fishing-waiting .progress-bar {
	position: relative;
	background: #0c4910;
	box-shadow: 0 0px 10px #4CAF50;
	background-size: 200% 200%;
	animation: slackin 5s linear infinite;
	border-radius: 2px;
	outline: 1px solid #8BC34A;
	overflow: hidden;
}
.fishing-waiting .progress-bar:before {
	content: '';
	position: absolute;
	background: linear-gradient(90deg, #4CAF50, #8BC34A);
	outline: 1px solid #8BC34A;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-radius: 2px;
	animation: fishingWaiting 5s ease-in-out infinite;
}

@keyframes slackin {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}
@keyframes reflectionFlash {

	0%,
	85%,
	100% {
		left: 120%;
		opacity: 0;
	}

	5% {
		opacity: .8;
	}

	15% {
		left: -100%;
		opacity: 0;
	}
}
@keyframes fishingWaiting {
	50% {
		width: 100%;
	}
	
	100% {
		width: 0;
		right: 0;
		left: unset;
	}
}

.progress-container.battle {
	height: 12px;
}

.battle .progress-bar span {
	line-height: 12px;
}

.battle .progress-bar {
	animation: unset;
}

.player .progress-bar {
	box-shadow: #3fb58a 0px 0px 10px;
	background: linear-gradient(90deg, #24df6f, #3defd0);
}

.enemy .progress-bar {
	box-shadow: #ff3434 0px 0px 10px;
	background: linear-gradient(90deg, #ff3458, #ff3ecd);
	margin-left: auto;
}

.battle-group {
	position: absolute;
	bottom: -8px;
	left: -1px;
	right: -1px;
	display: none;
	gap: 2px;
}

.battle .battle-group {
	display: flex;
}

.battle-unit {
	flex: 1;
	max-width: 24px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #24df6f, #3defd0);
	border: 1px solid rgba(0, 0, 0, .8);
}

.enemy .battle-unit {
	background: linear-gradient(90deg, #ff3458, #ff3ecd);
}

.battle-unit.disabled {
	background: #000;
	border-color: rgba(var(--r), var(--g), var(--b), .5);
}

.enemy .battle-group {
	flex-direction: row-reverse;
}

.mini-item {
	position: relative;
	background: #26264A;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3);
	font-size: 12px;
	display: inline-flex;
	gap: 4px;
	align-items: center;
	font-family: system-ui;
	font-weight: 700;
	height: 18px;
	line-height: 18px;
	width: -moz-fit-content;
	width: fit-content;
	border-radius: 4px;
	padding: 1px 5px;
	white-space: nowrap;
	color: #fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	cursor: pointer;
	transition: opacity 2s;
}

.mini-item::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	bottom: 0px;
	border-radius: 0 0 4px 4px;
	padding-bottom: 2px;
	background-color: var(--border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.mini-item.level {
	--border: #41e5ef;
	background: #395ecd;
}

.mini-item.action {
	--border: #74f9bc;
	background: #0c4e49;
}

.mini-item.battle {
	--border: #f00;
	background: #311f34;
}

.mini-item-num {
	display: inline-block;
	margin: 0;
	z-index: 5;
}

.mini-item-info {
	display: flex;
	align-items: center;
	z-index: 4;
	gap: 4px;
	overflow: hidden;
}

.mini-item-info .itemicon {
	transform: scale(0.75);
	transform-origin: -14px -14px;
	margin-right: -14px;
	margin-bottom: -14px;
	image-rendering: auto;
}

.action-cancel-btn {
	position: relative;
	width: 70px;
	border-radius: 4px;
	color: #333;
	background: #FFE069;
	text-align: center;
	cursor: pointer;
	transition: all .2s ease;
	font-weight: 700;
	font-family: system-ui;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 2px;
	filter: brightness(1);
	-webkit-filter: brightness(1);
	margin-left: auto;
	border: 2px solid #000;
}

.action-cancel-btn:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.action-cancel-btn.disabled {
	background: #f3f3ca;
	color: #939393;
	box-shadow: 0 0 15px rgba(85, 84, 70, .7);
}

.action-cancel-btn.disabled::before {
	background: #2f3b3d;
}

.action-cancel-btn.disabled::after {
	background: #531612;
}

.active-queue {
	position: relative;
	display: flex;
	white-space: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: rgba(13, 13, 51, .5);
	padding: 8px;
	font-size: 14px;
	cursor: pointer;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .6);
	transition: all .2s ease;
}

.active-queue.active {
	color: #75FBD6;
	border-color: var(--rgb);
	background: #0D0D33;
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	z-index: 0;
}

.active-queue-count {
	font-weight: 500;
}

/* 队伍页面样式 */
.party-body {
	flex: 1;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.party-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ui-tab.party-tabs {
	display: flex;
	margin: 2px;
	align-self: unset;
}
.party-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.planet-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.planet-tab {
	font-size: 14px;
}

/* 队伍列表样式 */
.party-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

.party-item {
	flex-direction: column;
	transition: all .2s ease;
}

.party-item:hover {
	border-color: rgba(var(--r), var(--g), var(--b), .8);
	box-shadow: 0 0 8px rgba(var(--r), var(--g), var(--b), .3);
}

.party-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.party-item-name {
	font-weight: 500;
	color: #75FBD6;
}

.party-item-info {
	display: flex;
	gap: 16px;
	margin-bottom: 8px;
	font-size: 14px;
}

.party-item-players {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 8px;
}

.party-item-players .battle-card {
	height: 130px;
}
.party-item-players .battle-card-skills {
	border-top:0;
}

.create-party-btn {
	display: flex;
	justify-content: center;
	padding: 8px;
}

/* 队伍信息样式 */
.team-info {
	flex: 1;
}

.ready-status.ready {
	color: #0f0;
}

.ready-status.not-ready {
	color: #f00;
}

.team-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 8px;
}

.battle-card.empty-card {
	opacity: 0.6;
	border-style: dashed;
}

.empty-avatar {
	background: rgba(255, 255, 255, 0.1);
}

.empty-name {
	color: #888;
}

.captain-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #ffd700;
	color: #000;
	font-size: 10px;
	padding: 2px 4px;
	border-radius: 4px;
	font-weight: bold;
}





.select-action-card.type-1 {
	--color-0: #74F9BC;
	--color-1: #74F9BC;
	--color-2: #126b43;
	--color-3: #0b3a64;
}

.select-action-card.type-2 {
	--color-0: #fff9c2;
	--color-1: #FAE579;
	--color-2: #4F343B;
	--color-3: #130F3E;
}

.select-action-card.type-3 {
	--color-0: #d7ffff;
	--color-1: #33FFFE;
	--color-2: #0D357A;
	--color-3: #110E43;
}

.select-action-card.type-4 {
	--color-0: #dfe6fb;
	--color-1: #98A7E9;
	--color-2: #3c3aab;
	--color-3: #08113d;
}
.select-action-card {
	--color-0: #ffffff;
	--color-1: #EC70F7;
	--color-2: #63056b;
	--color-3: #0e0f3e;
	position: relative;
	border-radius: 10px;
	cursor: pointer;
	backdrop-filter: blur(6px);
	padding: 8px;
	border: 2px solid var(--color-1);
	color: var(--color-0);
	display: flex;
	box-shadow: 0 0 6px rgba(0, 0, 0, .8);
	transform: translate(0);
	transition: all .2s ease, transform .1s ease;
}

.select-action-card:active {
	transform: scale(.9);
}

.select-action-card:hover {
	box-shadow: 0 0 9px var(--color-1);
}

.select-action-card.disabled {
	filter: grayscale(.6);
}

.select-action-card:after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, var(--color-1), transparent);
	opacity: .3;
	z-index: -1;
	border-radius: 6px;
	transition: all .2s ease;
}

.select-action-card:before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-2);
	opacity: .3;
	z-index: -1;
	border-radius: 6px;
}

.action-card-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .3);
	border-radius: 6px;
}

.actionicon {
	background: url(../images/action_icon.png);
	width: 56px;
	height: 56px;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}

.actionicon-1002 {
	background-position: -56px 0;
}

.actionicon-1003 {
	background-position: -112px 0;
}

.actionicon-1004 {
	background-position: -168px 0;
}

.itemicon.itemicon-action {
	transform: scale(2);
}

.action-card-progress {
	position: relative;
	height: 2px;
	width: 0;
	background: rgba(0, 0, 0, 0.3);
	margin: 8px 0;
	border-radius: 2px;
	overflow: hidden;
	flex: 1;
	transition: all .2s ease;
	animation: widthExpand .3s ease .3s forwards, heightGrow .2s ease .6s forwards;
}

.action-card-progress-bar {
	position: absolute;
	height: 100%;
	background: var(--color-1);
	border-radius: 2px;
	width: 0;
	transition: all .2s ease;
	animation: barExpand .5s ease .8s forwards;
}

@keyframes widthExpand {
	to {
		width: 100%;
	}
}

@keyframes heightGrow {
	to {
		margin: 6px 0;
		height: 6px;
	}
}

@keyframes barExpand {
	to {
		width: var(--progress-width);
	}
}

@keyframes fishingPulse {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

@keyframes fishingWave {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.action-proficiency {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: bold;
	color: var(--color-1);
}

.action-proficiency-value {
	
}

.battle .action-proficiency {
	color: #74F9BC;
}

.action-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-left: 8px;
}

.action-card-title {
	height: 26px;
	text-align: center;
	line-height: 26px;
	border-radius: 4px;
	display: flex;
	gap: 4px;
}

.action-card-title>div {
	height: 26px;
	line-height: 26px;
	background: var(--color-1);
	color: var(--color-3);
	border-radius: 4px;
}

.action-card-name {
	flex: 1;
}.action-card-level {
	width: 26px;
}

.action-card-result {
	display: flex;
	gap: 4px;
	margin-top: 8px;
}

.action-card-result-item {
	display: flex;
	align-items: center;
	gap: 4px;
}
.action-card-result-item .item{
	width: 30px;
	height: 31px;
}
.action-card-result-item .itemicon{
	transform: scale(1);
}

/* 队列样式 */
.queue-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	margin: 4px 0;
	background: rgba(255, 255, 255, .1);
	border-radius: 6px;
	transition: background .2s;
}

.queue-item:hover {
	background: rgba(255, 255, 255, .2);
}

.queue-item.current {
	background: rgba(100, 255, 100, .15);
	font-weight: bold;
}

.remove-btn {
	padding: 2px 8px;
	margin-left: 8px;
	background: rgba(255, 50, 50, .2);
	color: #ff5555;
	border-radius: 12px;
}

.remove-btn:hover {
	background: rgba(255, 50, 50, .3);
}

.queue-item button {
	padding: 2px 8px;
	font-size: 12px;
}

progress {
	flex-grow: 1;
	height: 12px;
}

.modal-queue-button {
	display: flex;
	gap: 6px;
}

.start-action,
.queue-action,
.party-action{
	flex-grow: 1;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 14px;
	font-size: 14px;
	max-width: 140px;
}

.start-action .tip {
	font-size: 12px;
	font-weight: 400;
}

.start-action {
	background: linear-gradient(160deg, #56ACF5, #6CEAFB);
	border-color: #6CEAFB;
}

.queue-action {
	flex: 1;
}

.party-action .tip {
	font-size: 12px;
	font-weight: 400;
}

.party-action {
	background: linear-gradient(160deg, #ffd019, #f9e598);
	border-color: #f9e598;
}

.upgrade-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.upgrade-stat-item {
	display: flex;
	justify-content: space-between;
	padding: 4px 8px;
	background: rgba(0,0,0,0.1);
	border-radius: 4px;
}

.upgrade-stat-item .success{
	color: #2ecc71;
}

.upgrade-stat-item .fail{
	color: #e74c3c;
}

.reward-animation {
	position: fixed;
	color: #2ecc71;
	font-weight: bold;
	text-shadow: 0 0 3px rgba(0, 0, 0, .5);
	animation: floatUp 2s ease-out forwards;
	z-index: 100;
	pointer-events: none;
}

@keyframes floatUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		transform: translateY(-100px);
		opacity: 0;
	}
}

@keyframes progress-animation {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

.action-card {
	position: relative;
	padding-bottom: 50px;
	/* 为按钮留出空间 */
}

.ui-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	box-sizing: border-box;
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	margin: 8px 0;
	border-radius: 8px;
	z-index: 1;
	/* 背景固定在容器上，滚动由 .ui-tab-content 负责 */
	max-width: 100%;
}

/* 标签项内容层：占满剩余空间并横向滚动，左右为固定箭头 */
.ui-tab-content {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.ui-tab-content::-webkit-scrollbar {
	display: none;
}

.ui-tab-item {
	position: relative;
	font-weight: 500;
	height: 24px;
	line-height: 24px;
	cursor: pointer;
	color: rgba(var(--r), var(--g), var(--b), .6);
	padding: 4px 10px;
	font-size: 14px;
	transition: all .2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.ui-tab-item:hover,
.ui-tab-item.active {
	color: #75FBD6;
}

.ui-tab-item::before {
	content: '';
	position: absolute;
	inset: 2px;
	box-shadow: inset var(--rgb) 0 0 8px 0px;
	z-index: -1;
	border-radius: 4px;
	opacity: 0;
	transition: all .2s ease;
}

.ui-tab-item.active::before {
	opacity: 1;
}

.ui-tab-arrow {
	width: 20px;
	height: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	background-color: rgba(0, 0, 0, .6);
	border: 1px solid rgba(var(--r), var(--g), var(--b), .5);
	z-index: 2;
	user-select: none;
	flex-shrink: 0;
	margin: 0 2px;
}

.ui-tab-arrow.show {
	display: flex;
}

.tip-tool {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	max-width: 300px;
	overflow: hidden;
	border-radius: 6px;
	background: linear-gradient(to bottom, #423c4f, #555563);
	color: #C0C6DD;
	box-shadow: 0 0 8px rgba(0, 0, 0, .6);
	outline: 1px solid rgba(255, 255, 255, .1);
	z-index: 1000;
	visibility: visible;
	pointer-events: none;
}

.tip-tool.action-level,
.tip-tool.normal {
	border-radius: 8px;
	background: linear-gradient(to bottom, #423c4f, #555563);
	color: #fff;
	border: 0;
}
.tip-tool.mini {
}

.tip-tool-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 18px;
	font-weight: 500;
	background: #2E2A37;
	padding: 8px;
	text-align: center;
}
.tip-tool-title .action-icon{
	filter: unset;
}
.tip-tool-content {
	padding: 8px;
}

.tip-tool.mini .tip-tool-title {
	font-size: 14px;
}

.tip-tool .title {
	color: #fff;
}

.tip-tool .description,
.tip-tool .time {
	font-family: system-ui;
	font-size: 12px;
}

.tip-event .tip-tool-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}

.tip-tool-info {
	padding: 4px;
	background: rgba(0, 0, 0, .2);
	border: 2px solid rgba(255, 255, 255, .2);
	border-radius: 4px;
}

.tip-tool-info .time {
	color: #fff;
}

.table {
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid rgba(0, 0, 0, .5);
	color: #C0C6DD;
}
.table-item {
	display: flex;
}
.table-item:nth-child(odd){
	background: rgba(0, 0, 0, .3);
}
.table-item span {
	flex: 1;
	text-align: center;
	padding: 4px;
	background: rgba(0, 0, 0, .3);
}
.table-item span:nth-child(odd){
	background: rgba(0, 0, 0, .1);
}
.item-info {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 256px;
	max-width: 300px;
	min-height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(to bottom, #423c4f, #555563);
	box-shadow: 0 0 8px rgba(0, 0, 0, .6);
	outline: 1px solid rgba(255, 255, 255, .1);
	z-index: 1000;
	visibility: visible;
	pointer-events: none;
}

.item-info-grade {
	position: absolute;
	right: 8px;
	top: 8px;
	font-size: 26px;
	opacity: .23;
	letter-spacing: 3px;
}

.item-info-header {
	display: flex;
	gap: 10px;
	background: #2E2A37;
	padding: 16px;
	color: #fff;
}

.item-info-header-right {
	flex: 1;
}

.item-info-name {
	font-weight: 500;
}.item-info-quantity,
.item-info-price,
.item-info-type{
	font-size: 14px;
	display: flex;
	gap: 6px;
}

.item-info-disabled {
	display: flex;
	gap: 6px;
	font-size: 14px;
}

.item-info-require {
	display: flex;
	gap: 6px;
	font-size: 14px;
}

.item-info-require-list {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	column-gap: 8px;
}

.item-info .disabled,
.item-info-disabled {
	color: #FF4B88;
}

.item-info-content {
	margin: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.item-info-content-item {
	flex: 1;
}

.item-info-attribute,
.item-info-efficiency {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item-info-attribute-name,
.item-info-efficiency-name {
	font-weight: 500;
	color: #C0C6DD;
}

.item-info-attribute-data,
.item-info-efficiency-data {
	display: flex;
	gap: 2px;
	font-size: 14px;
	color: #7CF9FB;
}

.item-info-attribute-data .basic,
.item-info-efficiency-data .basic {
	color: #fff;
}

.item-info-attribute-data .add,
.item-info-efficiency-data .add {
	color: #b388ff;
}

.negative .item-info-attribute-name,
.negative .item-info-attribute-data,
.negative .item-info-efficiency-name,
.negative .item-info-efficiency-data {
	color: #FF4B88;
}
.item-info-substitution {
	display: flex;
	gap: 4px;
	font-size: 14px;
	color: #7CF9FB;
	align-items: center;
}
.item-info-special-description {
	font-size: 14px;
	color: #7CF9FB;
}
.item-info-cooking-unlocked {
	font-size: 14px;
	color: #6DE27D;
}
.item-info-special-text {
	font-size: 14px;
}

.item-info-footer {
	font-size: 14px;
	margin: 12px;
	color: rgba(255, 255, 255, .5);
}
.titles-list{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.titles-list div {
	display: flex;
	gap: 6px;
}
.item-info-tip {
	margin: 12px;
	text-align: center;
	font-size: 12px;
	font-family: system-ui;
	color: var(--color-mian);
}

.modal-content.itemView-modal-content {
	width: 300px;
}

.itemView-modal-content .item-info {
	display: block;
	position: relative;
	margin: 0 auto;
}

/*pop*/
.modal-box {
	position: fixed;
	z-index: 150;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .3s ease;
}

.modal-content {
	max-width: 90vw;
	width: min(90vw, 500px);
	margin-top: -50px;
	display: flex;
	flex-direction: column;
	z-index: 1;
	transition: all .3s ease;
}
.filter{
	animation: filter .5s forwards;
}
@keyframes filter {
	from {
	backdrop-filter: blur(0);
	}

	to {
	backdrop-filter: blur(6px);
	}
}
.modal-header {
	border-bottom: 2px solid rgba(52, 119, 149, .6);
	padding: 12px 12px 12px 46px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
}

.modal-header:after {
	content: '';
	position: absolute;
	left: 12px;
	top: 6px;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	background-position: -168px -28px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}
.modal-header.mini {}

.modal-title {
	font-weight: 500;
	color: #D8FDFE;
}

.modal-double-title {
	display: flex;
	flex-direction: column;
	color: #D8FDFE;
}

.modal-double-title .principal {
	font-weight: 500;
}

.modal-double-title .secondary {
	font-size: 12px;
}

.modal-body {
	position: relative;
	padding: 12px 12px 20px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.modal-container {
	overflow-y: scroll;
}

.modal-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: .2;
	pointer-events: none;
}

.modal-bg>div {
	position: absolute;
	right: 10%;
	top: 50%;
	transform: scale(10);
}

.modal-flavour {
	font-size: 14px;
	color: #C9F8F8;
	font-style: italic;
	padding-bottom: 8px;
}

.modal-container-title {
	position: relative;
	padding: 6px 0 12px;
	font-weight: 500;
	color: var(--color-mian);
	font-size: 14px;
}

.modal-container-title:after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background-color: var(--color-mian);
	opacity: .2;
	pointer-events: none;
}

.modal-container-title:before {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 6px;
	height: 2px;
	border: 4px solid var(--color-mian);
	border-top: 0;
	border-bottom: 0;
}

.modal-box-item.center {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 12px 0 0;
	padding: 0 8px;
	gap: 8px;
}

.modal-box-item.center input {
	flex: 1;
}

/* Modal box item utils */
.modal-box-item.padding-y {
	padding: 10px 0;
}

.modal-box-item.flex-center {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.modal-box-item.margin-top {
	margin-top: 12px;
}

.modal-box-item.danger {
	color: #ff6b6b;
	margin-bottom: 15px;
}

.modal-box-item.text-center {
	text-align: center;
	font-size: 16px;
	margin: 10px 0;
}

.modal-box-item.hidden {
	display: none;
}

/* Table utils */
.table.fixed-width {
	width: 280px;
}

/* Market order colors */
.market-order-warning {
	color: #FFE069;
}

.market-order-normal {
	color: var(--color-minor);
}

.market-order-expired {
	color: #ccc;
}



/* Upgrade element */
.upgrade-fail.hidden {
	display: none;
}

.modal-tip {
	color: var(--color-minor);
	font-size: 14px;
	padding: 8px 0 0 18px;
}

.repeat-input {
	width: 40px;
	padding: 2px 8px;
}

.close-modal {
	font-weight: bold;
	cursor: pointer;
	transition: color .2s;
	color: #D8FDFE;
	font-family: math;
}

.close-modal:hover {
	color: #fff;
}

.fade-in {
	opacity: 1 !important;
}

.slide-in {
	margin-top: 0 !important;
}

.planet-modal-content {
	width: 480px;
}

.modal-box-item .illustration {
	position: relative;
	width: 100%;
	max-width: 440px;
	height: 0;
	background-size: cover;
	border-radius: 12px;
	margin: 8px auto;
	padding-top: 45.45%;
	overflow: hidden;
	background-position: center;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.modal-box-item .illustration::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 200%;
	background: linear-gradient(#fff 50%, #000 50%);
	background-size: 100% 5px;
	opacity: .1;
	pointer-events: none;
	z-index: 2;
}

body[data-effect="1"] .modal-box-item .illustration::before {
	animation: scrollMask 2s linear infinite;
}

.action-modal-content{
	width: 400px;
}

.attribute-modal-content {
	width:400px;
}.modal-action-repeat{
	padding: 4px 10px;
	color: #C9F8F8;
}

.modal-action-repeat {
	display: flex;
	gap: 4px;
	padding-top: 10px;
}

.quick-set {
	min-width: 40px;
	padding: 0 8px;
	font-weight: 700;
}

.action-item-container {
	display: flex;
	gap: 8px;
	padding: 2px 0;
	align-items: center;
	font-size: 14px;
}

.action-item-container.disabled {
	color: #ff3021;
}

.action-item-container-name {
	display: flex;
	align-items: center;
}

.action-item-container-value {
	display: flex;
	gap: 6px;
}

.action-item-container-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}

.action-item-container-icon {
	position: relative;
	cursor: pointer;
}
.action-item-icon {
	position: relative;
	padding: 2px;
	width: 56px;
	height: 56px;
	transition: all .2s ease;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
	background-color: rgba(117, 251, 214, .3);
	border-bottom: 2px solid #75FBD6;
}
.action-container-icon{
	position: relative;
}
.action-item-icon::after,
.action-container-icon::after{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
	z-index: 10;
	pointer-events: none;
}
.action-item-icon.action-exp-icon {
	width: 56px;
	height: 56px;
}
.action-item-icon.action-exp-icon::after{
	background-position: -56px -84px;
	transform: scale(2);
	margin: 25%;
}
.action-item-icon.action-exp-icon.character-exp::after{
	background-position: 0 -56px;
}
.action-item-icon.action-exp-icon.grade::after{
	background-position: -84px -140px;
}
.action-item-icon.action-exp-icon.title::after{
	background-position: -168px -140px;
}
.action-item-icon.activity::after{
	background-position: -112px -140px;
}
.action-item-icon.achievement::after{
	background-position: -252px -112px;
}
.action-item-icon-1::after{
	background-position: -56px -56px;
}
.action-item-icon-2::after{
	background-position: -84px -56px;
}
.action-item-icon-6::after{
	background-position: -112px -56px;
}
.action-item-icon-7::after{
	background-position: -252px -140px;
}
.action-item-icon-8::after{
	background-position: -140px -56px;
}
.action-item-icon-201::after{
		background-position: 0 -84px;
}

.action-item-container-text.disabled {
	color: #ff3021;
}
.chance-certain {
	color: #75FBD6;
}
.chance-uncertain {
	color: #FFE069;
}

.modal-action-button {
	display: flex;
	gap: 8px;
	padding: 6px 10px 0;
}
.modal-battle-repeat {
	display: flex;
	gap: 4px;
}
.modal-battle-button {
	display: flex;
	gap: 8px;
	padding-top: 6px;
}
.modal-item-icon {
	display: flex;
	gap: 8px;
	padding-bottom: 12px;
}

.result-modal-content {
	width: 388px;
}

.result-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: center;
	gap: 8px;
	border: 8px solid transparent;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.offline-item {
	display: flex;
	gap: 4px;
	padding: 6px;
	background: rgb(var(--r), var(--g), var(--b), .2);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 14px;
	margin-top: 6px;
}

.offline-action-icon {
	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
}

.offline-action-icon .action-icon {
	transform: scale(2);
}

.offline-action-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.offline-action-name {
	font-size: 18px;
	color: var(--color-minor);
}

.offline-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: start;
	gap: 4px;
	margin: 4px;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.offline-item .modal-container-title {
	padding-top: 0;
}
.record-page {
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}
.record-toolbar {
	display: flex;
}
.record-loading {
	display: flex;
	gap: 4px;
	padding: 8px;
	background: rgba(0, 0, 0, .6);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 14px;
}
.record-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	overflow: auto;
}

.record-item {
	flex-direction: row;
}

.record-icon {
	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.record-icon .action-icon {
	transform: scale(2);
}

.record-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.record-name {
	font-size: 18px;
	color: #fff;
	font-weight: 700;
}

.record-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: start;
	gap: 4px;
	margin: 4px;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.record-item .modal-container-title {
	padding-top: 0;
}

.empty-text {
	text-align: center;
	color: rgba(var(--r), var(--g), var(--b), .7);
	padding: 40px;
	font-size: 16px;
}
.achievement-point{
	margin-left: auto;
}
.achievement-point-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 6px;
}
.achievement-point-icon{
	background-color: #FFD700;
}
.achievement-page {
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}

.achievement-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	overflow: auto;
}

.achievement-item {
	align-items: flex-start;
	flex-shrink: 0;
}

.achievement-item.unlocked {
	border-color: #4CAF50;
}

.achievement-icon {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 6px;
	background: rgba(var(--r), var(--g), var(--b), .3);
}

.achievement-icon.unlocked {
	background: rgba(76, 175, 80, .3);
	border-color: #4CAF50;
}

.achievement-icon.locked {
	background: rgba(128, 128, 128, .3);
	border-color: #999;
}

.achievement-name {
	font-size: 16px;
	color: var(--color-minor);
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 8px;
}
.achievement-name span{
	background-color: rgba(100, 255, 100, 0.2);
	color: #66ff66;
	border: 1px solid rgba(100, 255, 100, 0.4);
	border-radius: 4px;
	width: 16px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	font-family: system-ui;
}

.achievement-icon-inner {
	font-size: 16px;
}

.achievement-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 4px;
}

.achievement-desc {
	font-size: 13px;
	color: rgba(var(--r), var(--g), var(--b), .8);
}

.achievement-reward {
	font-size: 12px;
	color: #FFD700;
	display: flex;
	gap: 6px;
}

.achievement-progress {
	color: rgba(var(--r), var(--g), var(--b), .7);
}
.achievement-footer{
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}
.achievement-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.achievement-summary-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: rgb(var(--r), var(--g), var(--b), .2);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 6px;
	align-items: center;
	transition: all .2s ease;
}

.achievement-summary-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: rgba(var(--r), var(--g), var(--b), .3);
	flex-shrink: 0;
}

.achievement-summary-icon.has-progress {
	background: rgba(0, 212, 254, .3);
}

.achievement-summary-icon.overall {
	background: rgba(168, 70, 240, .3);
}

.achievement-summary-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.achievement-summary-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.achievement-summary-name {
	font-size: 15px;
	color: var(--color-minor);
	font-weight: bold;
	margin-bottom: 2px;
}

.achievement-summary-count {
	font-size: 12px;
	color: rgba(var(--r), var(--g), var(--b), .7);
}

.btn.small {
	padding: 4px 12px;
	font-size: 12px;
}

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

.achievement-progress-text {
	font-size: 12px;
	color:rgba(255,255,255,.7);
}
.achievement-progress-text.agreed{
	color: var(--rgb);
}
.achievement-description{
	font-size: 14px;
}
.clickable {
	background: rgba(255, 224, 105, .2);
	color: #FFE069;
	padding: 2px 4px;
	border-radius: 4px;
}

.ranks-page {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px;
	gap: 12px;
}
.ranks-tabs {
	margin: 0;
}
.ranks-loading {
	display: flex;
	gap: 4px;
	padding: 8px;
	background: rgba(0, 0, 0, .6);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 14px;
}

.ranks-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	overflow: auto;
}
.rank-item {
	position: relative;
	align-items: center;
	flex-direction: row;
	--color: rgba(var(--r), var(--g), var(--b), .6);
	border-color: var(--color);
}
.rank-item:nth-child(1) {
	--color: #FFD700;
}

.rank-item:nth-child(2) {
	--color: #C0C0C0;
}

.rank-item:nth-child(3) {
	--color: #CD7F32;
}
.rank-item:after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: 2;
	border-radius: 4px;
	box-shadow: inset var(--color) 0 0 8px;
	pointer-events: none;
}

.rank-position {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--color);
	flex-shrink: 0;
}

.rank-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 4px;
}

.rank-name {
	font-size: 16px;
	color: var(--color-minor);
	font-weight: bold;
}
.rank-extra{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.rank-level {
	font-size: 18px;
}
.rank-exp {
	color: rgba(var(--r), var(--g), var(--b), .6);
	font-size: 12px;
}
.rank-points {
	display: flex;
	align-items: center;
	gap: 6px;
}
.modal-content.dictionary-modal-content {
	width: 880px;
}

.modal-content.dictionary-modal-content .modal-header {
	padding: 12px;
}
.modal-content.dictionary-modal-content .modal-header:after{
	display: none;
}

.dictionary-title {
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 6px;

}

.dictionary-title .item {
	width: 30px;
	height: 31px;
}

.dictionary-title .item::before {
	padding-bottom: 1px;
}

.dictionary-title .itemicon {
	transform: scale(1);
}

.dictionary-title .action-item-icon {
	width: 30px;
	height: 30px;
	padding: 0;
	border-bottom-width: 1px;
}
.dictionary-title .action-item-icon:after {
	transform: scale(1);
	margin:0;
}

.modal-tab {
	display: flex;
	margin: 8px 24px 0 16px;
	gap:8px;
}

.modal-tab-item {
	position: relative;
	flex: 1;
	text-align: center;
	padding: 4px;
	color: rgba(var(--r), var(--g), var(--b), .6);
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	cursor: pointer;
	border-radius: 8px 8px 0 0;
}

.modal-tab-item.active {
	color: var(--color-minor);
	background-color: rgba(var(--r), var(--g), var(--b), .5);
}

.modal-tab-item.disabled {
	color: rgba(var(--r), var(--g), var(--b), .3);
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	cursor: not-allowed;
	pointer-events: none;
}

.modal-tab-container {
	position: relative;
	flex: 1;
	padding: 8px;
	margin: 0 8px 8px 0;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 8px;
}

.modal-tab-container:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 100%;
	height: 100%;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .4);
	border-right: 2px solid rgba(var(--r), var(--g), var(--b), .4);
	border-radius: 10px;
	pointer-events: none;
}

.modal-tab-container:after {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 100%;
	height: 100%;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	border-right: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	border-radius: 12px;
	pointer-events: none;
}

.modal-tab-container.alchemy-container {
	margin: 0 16px 16px 8px;
}

.modal-monster-table {
	display: flex;
	gap: 8px;
}

.modal-monster-table>div {
	flex: 1;
	justify-content: space-between;
}

.action-item-container.negative,
.action-item-container.negative .action-item-container-value {
	color: rgba(255, 255, 255, .5);
}

.action-item-container.none,
.action-item-container.none .action-item-container-value {
	color: #FF4B88;
}

.modal-monster-table .action-item-container-value {
	color: var(--color-mian);
}

.modal-monster-skill {
	display: grid;
	grid-template-columns: repeat(auto-fill, 64px);
	grid-template-rows: max-content;
	gap: 4px;
	box-sizing: border-box;
	margin: 4px 0;
}
.monster-list {
	display: flex;
	gap: 8px;
}
.monster-card {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 6px;
	border: 2px solid rgba(0, 243, 205, .2);
	background: rgba(var(--r), var(--g), var(--b), .3);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .2);
	cursor: pointer;
	transition: all .2s ease;
	padding: 4px;
}

.monster-card:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}
.monster-avatar-type {
	position: absolute;
	top: -8px;
	right: -8px;
	color: #74F9BC;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
/*menu*/
.item-menu {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 160;
	width: 270px;
	max-width: 300px;
	backdrop-filter: blur(6px);
	overflow: hidden;
}

.item-menu-title {
	font-size: 18px;
	font-weight: 500;
	padding: 6px 8px;
	display: flex;
	gap: 6px;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.item-menu-title .item {
	width: 32px;
	height: 31px;
}

.item-menu-title .item::before {
	padding-bottom: 1px;
}

.item-menu-title .itemicon {
	transform: scale(1);
}

.item-menu-title-info {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
}

.item-menu-count {
	margin-left: auto;
	color: rgba(var(--r), var(--g), var(--b), .8);
	background-color: rgba(0, 0, 0, .5);
	border-radius: 4px;
	padding: 2px 4px;
	font-size: 16px;
	min-width: 18px;
	text-align: center;
}

.item-menu-button-list {
	overflow: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: center;
	gap: 4px;
	border: 8px solid transparent;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.item-menu-button {
	cursor: pointer;
}

.item-menu-button.disabled {
	opacity: .5;
	filter: grayscale(1);
}

.item-menu-button:hover .item-menu-icon:after {
	opacity: .9;
	transition: all .2s ease;
}

.item-menu-icon {
	position: relative;
	text-align: center;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, .4);
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
	color: #fff;
	overflow: hidden;
	font-size: 14px;
}

.item-menu-icon:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(var(--r), var(--g), var(--b), .8);
	opacity: .1;
	z-index: -1;
}

.menu-icon {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}

.menu-icon-1 {
	background-position: 0 -112px;
}

.menu-icon-2 {
	background-position: -28px 0;
}

.menu-icon-3 {
	background-position: -56px 0;
}

.menu-icon-4 {
	background-position: -84px 0;
}

.menu-icon-5 {
	background-position: -112px 0;
}

.menu-icon-6 {
	background-position: -140px 0;
}

.menu-icon-7 {
	background-position: -168px 0;
}

.menu-icon-8 {
	background-position: -196px 0;
}

.menu-icon-9 {
	background-position: -224px 0;
}

.menu-icon-10 {
	background-position: -252px 0;
}

.menu-icon-11 {
	background-position: 0 -28px;
}
.menu-icon-12 {
	background-position: -224px -112px;
}
.menu-icon-13 {
	background-position: -56px -140px;
}

.item-menu-button-name {
	font-size: 12px;
	text-align: center;
	margin-top: 4px;
	text-shadow: 1px 1px #000;
}

.item-menu-component {
	margin: 8px;
	flex-direction: column;
	display: flex;
	gap: 6px;
}

.item-menu-input {
	display: flex;
	gap: 4px;
}

.item-menu-input .input {
	flex: 1;
	min-width: 0;
}

.item-menu-input .btn {
	font-size: 12px;
}

.btn.i-btn {
	padding: 4px 6px;
}

.notification-container {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1000;
	pointer-events: none;
}

.notification {
	color: #fff;
	font-weight: 500;
	padding: 12px 24px;
	margin-bottom: 8px;
	transform: translateY(-100px);
	opacity: 0;
	transition: all .4s ease-out;
	pointer-events: auto;
	cursor: pointer;
	max-width: 80%;
	word-break: break-word;
	position: relative;
	width: 300px;
	border-radius: 8px;
	border: 2px solid #00E3C3;
	box-shadow: inset 0px 0px 9px #00E3C3, 0 0 9px rgba(117, 251, 216, .8);
	background: rgba(4, 30, 65, .8);
}

.notification.tip {
	color: #aee6ff;
	border-color: #03A9F4;
	box-shadow: inset 0px 0px 9px #03A9F4, 0 0 9px rgba(3, 169, 244, .8);
	background: #144067;
}

.notification.error {
	color: #ffaeae;
	border-color: #f44336;
	box-shadow: inset 0px 0px 9px #f44336, 0 0 9px rgba(244, 67, 54, .8);
	background: #2d0000;
}

.notification.show {
	transform: translateY(0);
	opacity: 1;
}

.notification.hide {
	transform: translateY(-50px) scale(0.95);
	opacity: 0;
}

.rewards-container {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 100;
}

.rewards-container.bottom-right {
	right: 6px;
	bottom: 6px;
	align-items: flex-end;
}

.rewards-container.top-left {
	left: 6px;
	top: 6px;
	align-items: flex-start;
}

.rewards-container.top-right {
	right: 6px;
	top: 6px;
	align-items: flex-end;
}

.rewards-container.bottom-left {
	left: 6px;
	bottom: 6px;
	align-items: flex-start;
}

.rewards-item {
	background: #0B2A4E;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .6);
	border-radius: 8px;
	padding: 4px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 150px;
	opacity: 0;
}

.rewards-item:hover {
	border: 2px solid rgba(var(--r), var(--g), var(--b), .8)
}

.bottom-right .rewards-item,
.bottom-left .rewards-item {
	transform: translateY(100px);
}

.top-left .rewards-item,
.top-right .rewards-item {
	transform: translateY(-100px);
}

.rewards-item.show {
	transform: translateY(0);
	opacity: 1;
}

.bottom-right .rewards-item.hide,
.top-right .rewards-item.hide {
	transform: translateX(200px) scale(0.95);
	opacity: 0;
}

.top-left .rewards-item.hide,
.bottom-left .rewards-item.hide {
	transform: translateX(-200px) scale(0.95);
	opacity: 0;
}

.top-left .rewards-item:hover,
.bottom-left .rewards-item:hover {
	transform: translateX(5px);
}

.top-right .rewards-item:hover,
.bottom-right .rewards-item:hover {
	transform: translateX(-5px);
}

.top-left .rewards-item:hover.show,
.bottom-left .rewards-item:hover.show {
	transform: translateX(5px);
}

.top-right .rewards-item:hover.show,
.bottom-right .rewards-item:hover.show {
	transform: translateX(-5px);
}

.rewards-item .item {
	width: 32px;
	height: 31px;
}

.rewards-item .item::before {
	padding-bottom: 1px;
}

.rewards-item .itemicon {
	transform: scale(1);
}

.rewards-name {
	font-size: 14px;
}

.rewards-quantity {
	font-size: 12px;
}

.rewards-item-fish {
	border-left: 3px solid #00b4db;
}

.rewards-item-fish .rewards-name {
	color: #00d4ff;
}

.rewards-item-fish .rewards-weight {
	color: #00b4db;
	font-weight: 600;
}

.alchemy-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: scroll;
}

.alchemy-page {
	display: flex;
	flex-direction: column;
}

.alchemy-page.disabled {
	opacity: .6;
}

.alchemy-content {
	display: flex;
	font-size: 14px;
}

.alchemy-left {
	display: flex;
	flex-direction: column;
	width: 160px;
	border-right: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.alchemy-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px 8px 16px;
}

.alchemy-info-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.alchemy-info-item-name {
	width: 60px;
	font-size: 14px;
	text-align: right;
}

.alchemy-info-item-value {
	flex: 1;
	font-weight: 500;
	color: #75FBD6;
}

.alchemy-right {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.alchemy-detail-item {
	display: flex;
	gap: 8px;
	padding: 2px 0;
	align-items: center;
}

.alchemy-detail-container-name {
	font-size: 14px;
}

/* 量子炼金术材料标签 */
.alchemy-consumable-label {
	color: var(--color-minor);
	font-size: 14px;
}

.alchemy-detail-container-value {
	display: flex;
	font-weight: 500;
	gap: 6px;
	color: #75FBD6;
}
.alchemy-detail-container-value span {
	color: var(--color-minor);
	font-family: system-ui;
	font-weight: 700;
}
/* ===== 通用双栏面板布局 ===== */
.bipanel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bipanel-body {
	flex: 1;
	display: flex;
	overflow: hidden;
	position: relative;
}
.bipanel-sidebar {
	width: 200px;
	flex-shrink: 0;
	border-right: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transition: transform .25s ease;
}
.bipanel-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
}
.bipanel-sidebar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 4px;
	font-size: 18px;
	flex-shrink: 0;
}
.bipanel-title-bar {
	display: flex;
	align-items: center;
	gap: 8px;
}
@media (max-width: 768px) {
	.bipanel-sidebar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 40;
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transform: translateX(-100%);
	}
	.bipanel.bipanel-open .bipanel-sidebar {
		transform: translateX(0);
	}
	.bipanel .neon-title:after {
		display: none;
	}
	.bipanel .neon-title {
		padding-left: 10px;
	}
	.bipanel-sidebar-toggle {
		display: flex;
	}
}

.cooking-accordion-group {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid rgba(var(--r), var(--g), var(--b), .3);
	flex-shrink: 0;
}

.cooking-accordion-group.active {
	flex: 1;
	min-height: 0;
}

.cooking-accordion-group.active .cooking-accordion-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.cooking-accordion-content {
	display: none;
	background-color: rgba(var(--r), var(--g), var(--b), .02);
	display: none;
	background-color: rgba(var(--r), var(--g), var(--b), .02);
}
.cooking-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	transition: all .2s;
	flex-shrink: 0;
}

.cooking-accordion-header:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .3);
}

.cooking-recipe-item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border-bottom: 1px solid rgba(var(--r), var(--g), var(--b), .2);
	transition: all .2s;
}

.cooking-recipe-item:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .1);
}

.cooking-recipe-item.active {
	background-color: rgba(var(--r), var(--g), var(--b), .2);
}

.cooking-recipe-item.locked {
	opacity: .5;
}

.cooking-recipe-item.level-locked {
	opacity: .7;
}

.cooking-recipe-icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cooking-lock-icon {
	font-size: 12px;
	flex-shrink: 0;
}

.cooking-recipe-info {
	flex: 1;
	min-width: 0;
}

.cooking-recipe-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cooking-recipe-level {
	font-size: 11px;
	margin-top: 2px;
}
.level-locked .cooking-recipe-level{
	color: #ff3021;
 }

.cooking-detail {
	flex: 1;
}

.cooking-detail-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.cooking-detail-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}
.cooking-detail-name {
	font-size: 18px;
	font-weight: bold;
}
.cooking-detail-flavour {
	padding: 8px 0;
	font-size: 12px;
	font-style: italic;
}

.cooking-detail-section {
}

.cooking-detail-footer {
	
}

.alchemy-action-repeat {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding-top: 10px;
}

.alchemy-action-button {
	display: flex;
	gap: 8px;
}

.fishing-pond-item {
	padding: 8px;
	cursor: pointer;
	transition: all .2s;
	display: flex;
	gap: 8px;
}

.fishing-pond-item:hover {
	background: rgba(var(--r), var(--g), var(--b), .3);
}

.fishing-pond-item.active {
	background: rgba(var(--r), var(--g), var(--b), .3);
}

.fishing-pond-item.locked {
	
}

.fishing-pond-weather-icon {
	margin-left: auto;
	font-size: 16px;
	line-height: 1;
	align-self: center;
	opacity: 0.85;
}

.fishing-pond-icon {
	font-size: 20px;
	text-align: center;
	margin-bottom: 4px;
}

.fishing-pond-icon.locked-icon {
	color: #666;
}

.fishing-pond-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fishing-pond-name {
	font-weight: 500;
}

.fishing-pond-unlock {
	font-size: 11px;
	color: #ff6b6b;
}

.fishing-pond-proficiency {
	font-size: 11px;
	color: var(--color-minor);
}

.fishing-pond-detail {
}

.fishing-pond-detail-header {
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .3);
}

.fishing-pond-detail-title {
	display: flex;
	align-items: center;
}
.fishing-pond-detail-title>span{
	font-size: 18px;
	font-weight: bold;
}

.fishing-pond-weather {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--color-minor);
	margin-top: 2px;
}

.action-icon.weather-emoji {
	background: none;
	width: auto;
	height: auto;
	font-size: 14px;
	line-height: 1;
	margin-right: 2px;
}

/* ===== 天气tooltip ===== */
.tip-tool.tip-weather {
	min-width: 200px;
}
.tip-tool.tip-weather .tip-tool-title {
	display: flex;
	align-items: center;
	gap: 6px;
}
.tip-tool.tip-weather .tw-emoji {
	font-size: 16px;
	line-height: 1;
}
.tip-tool.tip-weather .tw-badge {
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 8px;
	background: rgba(192,160,255,.25);
	color: #c0a0ff;
	margin-left: auto;
}
.tip-tool.tip-weather.tw-natural .tw-badge {
	background: rgba(var(--r),var(--g),var(--b),.25);
	color: rgba(var(--r),var(--g),var(--b),1);
}
.tip-tool.tip-weather .tw-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	padding: 2px 0;
}
.tip-tool.tip-weather .tw-row .label {
	color: #999;
}
.tip-tool.tip-weather .tw-row .val.pos {
	color: #4ade80;
}
.tip-tool.tip-weather .tw-row .val.neg {
	color: #f87171;
}
.tip-tool.tip-weather .tw-special {
	margin-top: 6px;
	padding: 6px 8px;
	font-size: 12px;
	background: rgba(255,255,255,.06);
	border-radius: 4px;
	color: #e0e0e0;
}

.weather-icon {
	font-size: 16px;
}

.weather-effect {
	font-size: 11px;
	color: var(--color-minor);
	margin-left: 4px;
	padding: 2px 6px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 4px;
}

.fishing-pond-detail-desc {
	padding: 8px 0;
	font-size: 14px;
	color: #C9F8F8;
	font-style: italic;
}

.fish-collection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: start;
	gap: 8px;
}
.fish-collection-grid .item{
	cursor: pointer;
	position: relative;
}
.fish-max-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 12px;
	color: #FFE069;
	z-index: 11;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-weight: 700;
	pointer-events: none;
}
.fish-max-check {
	color: #FFE069;
	font-weight: 700;
	margin-left: 4px;
}
.modal-content.fish-modal-content {
	width: 300px;
}
.fish-detail-stats {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fish-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	font-size: 14px;
}
.fish-detail-label {
	color: var(--color-mian);
}
.fish-detail-value {
	font-size: 700;
}

.bait-selector {
	position: relative;
	display: flex;
	gap: 12px;
}
.bait-selector .item-icon {
	font-size: 16px;
}

.bait-selector .item-name {
	font-size: 13px;
	font-weight: 500;
}

.fishing-stats {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
}

.fishing-stat {
	display: flex;
	gap: 8px;
}

.fishing-pond-detail-action {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.fish-weight {
	font-size: 14px;
	color: var(--color-minor);
}

.alchemy-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 26px;
	opacity: .6;
}

.upgrade-page {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.upgrade-content {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-y: scroll;
	padding: 12px 6px;
}

.effect .upgrade-content {
	justify-content: center;
}

.upgrade-content .item-selector {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(1);
	transition: all .2s ease;
	margin: 0 0 12px 0;
}

.effect .upgrade-content .item-selector {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(3);
}

.upgrade-effect {
	position: absolute;
	top: 34px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	pointer-events: none;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
}

.upgrade-effect:after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 255, 255, .6) 2px, rgba(0, 255, 255, .1) 2px),
		linear-gradient(90deg, rgba(0, 255, 255, 0.6) 2px, transparent 2px);
	background-size: 48px 48px;
	opacity: 0;
	transition: all 1s ease;
	pointer-events: none;
}

.effect .upgrade-effect:after {
	opacity: .8;
}

.upgrade-effect:before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, .8) 50%, rgba(0, 255, 255, 0) 100%);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	background-size: 100% 200px;
	background-repeat: no-repeat;
}

.effect .upgrade-effect:before {
	animation: activate 2s ease-out forwards;
}

@keyframes activate {
	0% {
		top: 100%;
		opacity: 0;
	}

	50% {
		opacity: 0.8;
	}

	100% {
		top: -200px;
		opacity: 0;
	}
}

.upgrade-effect-ani {
	position: absolute;
	width: 60px;
	height: 60px;
	outline: 2px solid #75FBD6;
	border-radius: 6px;
	overflow: hidden;
	z-index: 50;
	pointer-events: none;
	animation: upgradeEffectUp 3s linear forwards;
}

.upgrade-effect-ani.down {
	animation: upgradeEffectDown 3s linear forwards;
}

.upgrade-effect-left,
.upgrade-effect-right {
	position: absolute;
	inset: 0;
	width: 50%;
	height: 300px;
	overflow: hidden;
	animation: upgradeEffectUpAni 3s linear forwards;
}

.upgrade-effect-right {
	left: 50%;
}

.upgrade-effect-ani.down .upgrade-effect-left,
.upgrade-effect-ani.down .upgrade-effect-right {
	animation: upgradeEffectDownAni 3s linear forwards;
}

.upgrade-effect-left::after,
.upgrade-effect-right::after {
	content: "";
	position: absolute;
	background-image: linear-gradient(transparent 50%, #75FBD6 50%);
	background-size: 100% 20px;
	transform: rotate(-45deg);
	width: 300px;
	height: 300px;
	top: 72px;
	left: -68px;
}

.upgrade-effect-right::after {
	left: auto;
	right: -68px;
	transform: rotate(45deg);
}

.down .upgrade-effect-left::after,
.down .upgrade-effect-right::after {
	top: -68px;
	background-image: linear-gradient(transparent 50%, #F74A82 50%);
}

.down .upgrade-effect-left::after {
	left: -118px;
	transform: rotate(45deg);
}

.down .upgrade-effect-right::after {
	left: auto;
	right: -118px;
	transform: rotate(-45deg);
}

@keyframes upgradeEffectUp {
	0% {
		outline-color: transparent;
		box-shadow: 0 0 2px 0 transparent;
	}

	5% {
		outline-color: #75FBD6;
		box-shadow: 0 0 8px 4px #75FBD6;
	}

	100% {
		outline-color: transparent;
		box-shadow: 0 0 2px 0 transparent;
	}
}

@keyframes upgradeEffectDown {
	0% {
		outline-color: transparent;
		box-shadow: 0 0 2px 0 transparent;
	}

	50% {
		outline-color: #F74A82;
		box-shadow: 0 0 8px 4px #F74A82;
	}

	100% {
		outline-color: transparent;
		box-shadow: 0 0 2px 0 transparent;
	}
}

@keyframes upgradeEffectUpAni {
	0% {
		opacity: 1;
		margin-top: 0;
	}

	100% {
		opacity: 0;
		margin-top: -228px;
	}
}

@keyframes upgradeEffectDownAni {
	0% {
		opacity: 1;
		margin-top: -300px;
	}

	100% {
		opacity: 0;
		margin-top: 0;
	}
}

.upgrade-effect-notification {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: hidden;
}

.upgrade-effect-notification-shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	animation: effectShadow 1s ease-in-out forwards;
}

@keyframes effectShadow {
	0% {
		background: transparent;
	}

	100% {
		background: rgba(0, 0, 0, .3);
	}
}

.upgrade-effect-notification-container {
	position: absolute;
	top: 20%;
	left: 50%;
	margin: -30px -100px;
	pointer-events: none;
	z-index: 10;
	--slice-2: inset(50% 50% 50% 50%);
	--slice-l: inset(40% -6px 50% 0);
	--slice-0: inset(50% -6px 30% 0);
	--slice-3: inset(50% 50% 50% 50%);
	--slice-4: inset(40% -6px 43% 0);
	--slice-5: inset(40% -6px 50% 0);
	animation: glitch 1s ease-in-out forwards;
}

.upgrade-effect-notification-title {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 48px;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 0px #00fffc;
	animation: upgradeEffectText 3s ease-in-out forwards;
}

.fail .upgrade-effect-notification-title {
	text-shadow: 2px 2px 0px #f00
}

@keyframes upgradeEffectText {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	20% {
		opacity: 1;
		transform: scale(1);
	}

	80% {
		opacity: 1;
		transform: scale(1);
	}

	85% {
		opacity: 0;
	}

	87% {
		opacity: 1;
	}

	89% {
		opacity: 0;
	}

	91% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}

.upgrade-effect-notification-light {
	position: absolute;
	top: 20%;
	height: 60px;
	margin-top: -30px;
	width: 0;
	z-index: 5;
	opacity: 0;
	display: none;
	background: #0ff;
	transform: skewX(32deg);
	animation: lightFromLeft 3s linear forwards;
}

.upgrade-effect-notification-light.left {
	left: 0;
}

.upgrade-effect-notification-light.right {
	height: 80px;
	margin-top: -40px;
	right: 0;
	animation: lightFromRight 3s linear forwards;
}

.fail .upgrade-effect-notification-light {
	background: #f00;
}

@keyframes lightFromLeft {
	0% {
		width: 0;
		opacity: 0;
		left: 0;
	}

	20% {
		width: 50%;
		opacity: 0.8;
		left: 30%;
	}

	80% {
		width: 50%;
		opacity: 0.8;
		left: 30%;
	}

	100% {
		opacity: 0;
	}
}

@keyframes lightFromRight {
	0% {
		width: 0;
		opacity: 0;
		right: 0;
	}

	20% {
		width: 50%;
		opacity: .8;
		right: 30%;
	}

	80% {
		width: 50%;
		opacity: .8;
		right: 30%;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 0.5;
	}

	85% {
		opacity: 0;
	}

	87% {
		opacity: 0.5;
	}

	89% {
		opacity: 0;
	}

	91% {
		opacity: 0.5;
	}

	99% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* 粒子效果 */
.upgrade-effect-notification-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 3;
	display: none;
}

.upgrade-effect-notification-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	animation: particleMove 2s linear forwards;
	background: rgba(0, 255, 252, 0.7);
	opacity: 0;
}

.fail .upgrade-effect-notification-particle {
	background: rgba(255, 0, 0, 0.7);
}

@keyframes particleMove {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}

	10% {
		transform: translate(0, 0) scale(1);
		opacity: .8;
	}

	100% {
		transform: translate(var(--tx), var(--ty)) scale(3);
		opacity: 0;
	}
}

@keyframes glitch {
	0% {
		clip-path: var(--slice-1);
		transform: translate(-4px, -2px);
	}

	10% {
		clip-path: var(--slice-3);
		transform: translate(2px, 2px);
	}

	20% {
		clip-path: var(--slice-1);
		transform: translate(-2px, 2px);
	}

	30% {
		clip-path: var(--slice-3);
		transform: translate(0px, 1px);
	}

	40% {
		clip-path: var(--slice-2);
		transform: translate(-1px, 0px);
	}

	50% {
		clip-path: var(--slice-3);
		transform: translate(5px, 0px);
	}

	60% {
		clip-path: var(--slice-4);
		transform: translate(1px, 2px);
	}

	70% {
		clip-path: var(--slice-2);
		transform: translate(-2px, 2px);
	}

	80% {
		clip-path: var(--slice-5);
		transform: translate(4px, -2px);
	}

	90% {
		clip-path: var(--slice-1);
		transform: translate(-2px, 0px);
	}

	100% {
		clip-path: var(--slice-1);
		transform: translate(0);
	}
}

.upgrade-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.upgrade-info-name {
	font-size: 18px;
}

.upgrade-info-level {
	display: flex;
	gap: 18px;
	font-size: 20px;
	color: var(--color-mian);
}

.upgrade-info .to {
	position: relative;
	padding: 0 4px;
}

.upgrade-info .to:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 50%;
	border-left: 5px solid #fff;
	border-top: 3px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 3px solid #fff;
}

.upgrade-info .to:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	border-left: 5px solid #fff;
	border-top: 3px solid #fff;
	border-right: 5px solid transparent;
	border-bottom: 3px solid transparent;
}

.effect .upgrade-info {
	display: none;
}

.upgrade-skip {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	width: 180px;
	height: 36px;
	margin: 100px 0 0 -90px;
}
.upgrade-skip .btn{
	max-width: 180px;
}

.upgrade-fail {
	display: flex;
	gap: 8px;
	color: rgba(255, 255, 255, .5);
}
.upgrade-fail.modal .value{
	text-decoration: line-through;
}
.upgrade-fail.modal .new-value{
	color:  #FFE069;
}
.upgrade-success-rate {
	font-size: 14px;
}

.upgrade-success-rate .value {
	color: var(--color-mian);
}
.upgrade-success-rate .value.struck {
	text-decoration: line-through;
	opacity: .4;
}
.upgrade-success-rate .new-rate {
	color: #FFE069;
	margin-left: 6px;
}
.upgrade-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 12px;
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}
.upgrade-add .title {
	flex-shrink: 0;
	color: rgba(255, 255, 255, .85);
}
.tier-mark-wrap {
	flex: 1;
	min-width: 0;
}
.tier-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	outline: 0;
	padding: 0;
}
.tier-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--rgb);
	cursor: pointer;
	transition: all .2s ease;
}
.tier-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--rgb);
	cursor: pointer;
	border: none;
	transition: all .2s ease;
}

.upgrade-detailed {
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 8px;
}

.upgrade-attribute {
	position: relative;
	flex: 1;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 8px 0;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-collapse: collapse;
}

.upgrade-attribute .current,
.upgrade-attribute .next {
	color: var(--color-mian);
}

.upgrade-attribute-item {
	align-items: center;
	width: 100%;
}

.upgrade-attribute-item td {
	border: 3px solid transparent;
	border-top: 0;
	border-bottom: 0;
}

.upgrade-attribute-item .name {
	text-align: center;
}

.upgrade-attribute-item .current {
	text-align: right;
	white-space: nowrap;
}

.upgrade-attribute-item .next {
	text-align: left;
	white-space: nowrap;
}

.upgrade-material {
	position: relative;
	padding: 8px;
	display: flex;
	border-collapse: collapse;
	justify-content: center;
	gap: 12px;
	align-items: center;
}

.alchemy-detail-container-value.disabled {
	color: #ff3021;
}

.upgrade-options {
	display: flex;
	border-collapse: collapse;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.upgrade-level {
	width: 40px;
	padding: 2px 8px;
	border-radius: 8px;
	border: 2px solid var(--rgb);
	background-image: linear-gradient(180deg, #092653, #096375);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	height: 20px;
}

.upgrade-level[disabled] {
	border-color: rgba(var(--r), var(--g), var(--b), .2);
	background: rgba(0, 0, 0, .6);
	box-shadow: unset;
	cursor: no-drop;
}

.upradde-btn {
	display: flex;
}

.upradde-btn .btn {
	padding: 12px 32px;
	font-size: 18px;
}

.item-selector {
	margin: 16px auto;
	display: flex;
	justify-content: center;
	cursor: pointer;
}

/* 量子炼金术次要物品选择卡（与主物品选择器一致） */
.consumable-selector {
	margin: 0 auto 8px;
}

.item-selector-empty {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 6px;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.item-selector-empty:before {
	position: absolute;
	content: '';
	left: 16px;
	top: 16px;
	right: 16px;
	bottom: 16px;
	background: linear-gradient(0, transparent 45%, rgba(var(--r), var(--g), var(--b), .5) 45%, rgba(var(--r), var(--g), var(--b), .5) 55%, transparent 55%), linear-gradient(90deg, transparent 45%, rgba(var(--r), var(--g), var(--b), .5) 45%, rgba(var(--r), var(--g), var(--b), .5) 55%, transparent 55%);
	user-select: none;
}

.item-selector-empty:after {
	position: absolute;
	content: '';
	inset: 0;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	user-select: none;
}

.item-disabled {
	opacity: 0.4;
}

.item-disabled .item-quantity {
	color: #ff4444;
}

.item-selector-title {
	display: none;
	color: #75FBD6;
	z-index: 6;
	position: absolute;
	left: 8px;
	bottom: 8px;
	font-size: 12px;
	width: 24px;
	font-family: system-ui;
	text-align: left;
	user-select: none;
	margin-bottom: 4px;
}

.selector {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 155;
	width: 360px;
	max-width: 360px;
	overflow: hidden;
	backdrop-filter: blur(6px);
}
.selector-content {
	display: flex;
	flex-direction: column;
}

.selector-tabs {
	margin: 6px 6px 0;
}

.selector-list {
	position: relative;
	flex: 1;
	background: rgba(0, 0, 0, .2);
	border-radius: 8px;
	margin: 6px;
	overflow: hidden;
}

.selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: center;
	gap: 4px;
	border: 8px solid transparent;
	overflow-y: auto;
	max-height: 280px;
	box-sizing: border-box;
}

.selector-grid.empty {
	grid-template-columns: auto;
}

.empty-tip {
	color: rgba(var(--r), var(--g), var(--b), .6);
	font-family: system-ui;
	user-select: none;
	padding: 12px;
	font-size: 16px;
	font-weight: 500;
}

.selector-item.unequip {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 6px;
	width: 60px;
	height: 62px;
	background: rgba(0, 0, 0, .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
}

.selector-item.unequip:after {
	position: absolute;
	content: '';
	inset: 0;
	border-bottom: 2px solid #fff;
	border-radius: 6px;
	opacity: .3;
}

.selector-item.skill {
	margin-bottom: 10px;
}

.action-queue {
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
}

.action-queue-box {
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: 360px;
	backdrop-filter: blur(6px);
}

.action-queue-title {
	position: relative;
	color: var(--color-minor);
	font-weight: 500;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 6px 10px 40px;
}

.action-queue-title:after{
	content: '';
	position: absolute;
	left: 12px;
	top: 6px;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	background-position: -168px -28px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.action-queue-list-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0px 8px 8px;
}

.action-queue-item {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: rgb(var(--r), var(--g), var(--b), .2);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	transition: all .2s ease;
}

.action-queue-item:hover {
	background: rgb(var(--r), var(--g), var(--b), .3);
}

.action-queue-item.dragging {
	opacity: .5;
	transform: scale(.95);
}
.action-queue-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.action-queue-icon {
	width: 28px;
	height: 28px;
	overflow: hidden;
}

.action-icon {
	position: relative;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: sepia(200%) saturate(100) hue-rotate(170deg) brightness(1.1) contrast(1.1);
}

.action-queue-top {
	display: flex;
	gap: 4px;
	align-items: center;
	display: flex;
	align-items: center;
}

.action-queue-top .name {
	font-weight: 500;
	overflow: hidden;
	flex: 1;
	text-overflow: ellipsis;
}

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

.action-queue-btn {
	position: relative;
	padding: 0;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 22px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
}

.action-queue-clear {
	background: #ff6570;
	position: relative;
	padding: 2px 6px;
	font-size: 14px;
	text-align: center;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
}

.action-queue-icon-start {
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #333;
}

.action-queue-icon-delete {
	background: #ff6570;
	width: 16px;
	height: 16px;
}
.action-queue-icon-delete::before,
.action-queue-icon-delete::after {
	content: '';
	position: absolute;
	top: 9px;
	left: 3px;
	width: 16px;
	height: 4px;
	background-color: #333;
}

.action-queue-icon-delete::before {
	transform: rotate(45deg);
}

.action-queue-icon-delete::after {
	transform: rotate(-45deg);
}

.action-queue-start {
	background: linear-gradient(160deg, #56ACF5, #6CEAFB);
}

.action-queue-remove {
	background: #ff6570;
}


.action-queue-rmpty {
	text-align: center;
	padding: 12px;
	font-weight: 500;
	pointer-events: none;
	user-select: none;
}
.action-queue-drag-handle {
	cursor: grab;
	padding: 0 10px;
	display: flex;
	align-items: center;
	font-size: 18px;
	background: rgb(var(--r), var(--g), var(--b), .2);
	border-radius: 4px;
	user-select: none;
}
.action-queue-drag-handle:hover {
	color: #75FBD6;
	background: rgb(var(--r), var(--g), var(--b), .2);
}
.action-queue-drag-handle:active {
	cursor: grabbing;
}
.shop-modal-content {
	width: 880px;
	max-width: 880px;
}

.shop-tab {
	display: flex;
	gap: 4px;
	padding-bottom: 2px;
	margin-bottom: 8px;
}

.shop-page {
	
}
.material-tabs {
	margin-top: 0;
}
.shop-page-list {
	gap: 8px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	overflow-y: scroll;
}
.material-tab-item{
	height: 28px;
	line-height: 28px;
	padding: 4px;
}
.material-tab-item .itemicon{
	transform: scale(1);
}
.shop-item {
	display: flex;
	gap: 8px;
	background: rgb(var(--r), var(--g), var(--b), .2);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	transition: all .2s ease;
	cursor: pointer;
	border-radius: 8px;
	padding: 8px;
}

.shop-item:hover {
	background: rgb(var(--r), var(--g), var(--b), .3);
}

.shop-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.shop-name {
	font-weight: 500;
}

.shop-daily-limit {
	font-size: 12px;
	color: #888;
}

.shop-daily-limit.sold-out {
	color: #FF4B88;
}

.buy-modal-content {
	width: 280px;
}

.tax.high {
	color: #FF4B88;
	font-weight: 500;
}

.mail-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 26px;
	opacity: .6;
}

.mail-modal-content {
	width: 672px;
	max-width: 672px;
}

.mail-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: scroll;
}

.mail-item {
	position: relative;
	padding: 8px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	display: flex;
	border-radius: 12px;
}

.mail-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mail-title {
	display: flex;
	justify-content: space-between;
}

.mail-title .title {
	font-weight: 500;
	color: #75FBD6;
}

.mail-title .name {
	color: var(--color-minor);
}

.mail-result {
	display: flex;
	gap: 8px;
	background: rgba(0, 0, 0, .2);
	border-radius: 8px;
	padding: 8px;
}

.btn.getmail-btn {
	font-size: 12px;
	padding: 5px 12px;
	margin: 12px auto;
}

.mail-result-modal-content {
	width: 458px;
}

.news-modal-content {
	width: 800px;
}

.news-accordion {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.news-item {
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0, 0, 0, .2);
	transition: border-color .2s;
}

.news-item.active {
	border-color: rgba(var(--r), var(--g), var(--b), .9);
}

.news-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	user-select: none;
	transition: background .2s;
}

.news-header:hover {
	background: rgba(255, 255, 255, .05);
}

.news-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.news-badge.info {
	background: rgba(33, 150, 243, .25);
	color: #64B5F6;
}

.news-badge.update {
	background: rgba(76, 175, 80, .25);
	color: #81C784;
}

.news-badge.warning {
	background: rgba(255, 152, 0, .25);
	color: #FFB74D;
}

.news-badge.event {
	background: rgba(233, 30, 99, .25);
	color: #F06292;
}

.news-badge.guide {
	background: rgba(156, 39, 176, .25);
	color: #BA68C8;
}

.news-title {
	flex: 1;
	font-size: 14px;
	color: #e5e7eb;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.news-date {
	font-size: 12px;
	color: #9ca3af;
	flex-shrink: 0;
}

.news-arrow {
	font-size: 10px;
	color: #9ca3af;
	transition: transform .25s;
	flex-shrink: 0;
}

.news-item.active .news-arrow {
	transform: rotate(180deg);
}

.news-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.news-item.active .news-body {
	max-height: 500px;
}

.news-content {
	padding: 0 12px 12px;
	font-size: 13px;
	line-height: 1.6;
	color: #d1d5db;
	word-break: break-word;
}

.cube-modal-content {
	max-width: 360px;
}

.modal-cube-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.item-target {
	margin: 16px auto;
}

.modal-cube-container .to {
	position: relative;
	padding: 0 10px;
}

.modal-cube-container .to:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 50%;
	border-left: 10px solid rgba(var(--r), var(--g), var(--b), .5);
	border-top: 6px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 6px solid rgba(var(--r), var(--g), var(--b), .5);
}

.modal-cube-container .to:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	border-left: 10px solid rgba(var(--r), var(--g), var(--b), .5);
	border-top: 6px solid rgba(var(--r), var(--g), var(--b), .5);
	border-right: 10px solid transparent;
	border-bottom: 6px solid transparent;
}

.item-target-empty {
	position: relative;
	border-radius: 6px;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.item-target-empty:after {
	position: absolute;
	content: '';
	inset: 0;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 4px;
	user-select: none;
}
.substitution-modal-content{
	width: 320px;
}
/*checkIn*/
.checkIn-modal-content {
	background: linear-gradient(124deg, #C775F5, #F775F9, #B358FB);
	border: 0;
	box-shadow: unset;
	z-index: unset;
	animation:unset;
}

.checkIn-modal-content:before {
	content: '';
	position: absolute;
	background: linear-gradient(124deg, #452955, #503551, #391a51);
	transform: rotate(3deg);
	right: -16px;
	bottom: -16px;
	left: -2px;
	top: -3px;
	z-index: -1;
	border-radius: 8px;
}

.checkIn-modal-content::after {
	background: linear-gradient(124deg, #8b4baf, #724973, #724a91);
	transform: rotate(359deg);
	box-shadow: unset;
	top: 14px;
	left: 14px;
	right: -14px;
	bottom: -14px;
	z-index: -1;
	border-radius: 8px;
}

.checkIn-modal-content .modal-body:before,
.checkIn-modal-content .modal-body:after {
	content: unset;
}

.checkIn-modal-content .modal-title {
	padding: 6px 20px;
	margin: 0 -60px;
	background: linear-gradient(124deg, #56C880, #FD8D4B);
	border-radius: 8px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
	font-size: 24px;
	color: #fff;
}

.checkIn-modal-content .modal-title i {
	padding-left: 20px;
}

.checkIn-modal-content .modal-header {
	border: 0;
	padding: 12px 22px 0 46px;
}
.checkIn-modal-content .modal-header:after {
	display: none;
}

.checkIn-modal-content .close-modal {
	font-size: 36px;
	color: #fff;
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.calendar-day {
	aspect-ratio: 1;
	background: #FAE268;
	border-radius: 6px;
	padding: 8px 0;
	color: #8C66F6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	transition: all .3s ease;
	position: relative;
	min-width: 0;
	filter: brightness(1);
	-webkit-filter: brightness(1);
}

.calendar-day:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.calendar-day::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 10;
	pointer-events: none;
	border-radius: 6px;
	opacity: 0;
}

.calendar-day.missed::before,
.calendar-day.completed::before {
	opacity: .2;
}

.calendar-day::after {
	content: "";
	position: absolute;
	inset: 10%;
	z-index: 10;
	opacity: 0;
	border: 4px solid #4CFF4C;
	border-radius: 50px;
	aspect-ratio: 1 / 1;
	box-shadow: inset 0px 0px 2px #4CFF4C, 0 0 9px #4CFF4C;
	pointer-events: none;
}

.calendar-day.completed::after {
	opacity: 1;
	animation: completed .3s ease-in forwards;
}

@keyframes completed {
	from {
		transform: scale(2);
	}

	to {
		transform: scale(1);
	}
}

.calendar-day.today {
	background: linear-gradient(180deg, #2CA3FF, #55EECB);
	color: #074a7d;
	cursor: pointer;
}

.calendar-item {
	z-index: 1;
}

.calendar-item .item {
	width: 32px;
	height: 31px;
}

.calendar-item .item::before {
	padding-bottom: 1px;
}

.calendar-item .itemicon {
	transform: scale(1);
}

.modal-calendar-flavour {
	margin-top: 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.sidebar-close {
	display: none;
	position: fixed;
	width: 200vw;
	height: 100vh;
	background: rgba(0, 0, 0, .3);
	z-index: -1;
}
.sidebar-character {
	position: relative;
	display: inline-table;
	border-radius: 8px;
	overflow: hidden;
}
.character {
	position: relative;
	display: flex;
	padding: 8px;
	border-radius: 6px;
	gap: 8px;
	background-color: rgba(0, 0, 0, .6);
	margin: 2px;
	z-index: 5;
}

.charac-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.charac-info .name {
	color: var(--color-minor);
	font-weight: 500;
}

.charac-info .title-name {
	font-size: 12px;
}

.charac-level {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.charac-level .lv {
	color: var(--rgb);
	position: absolute;
	right: 10px;
	bottom: 5px;
	font-size: 28px;
	opacity: .7;
}

.sidebar-character .exp {
	font-size: 14px;
}

.sidebar-character .exp-mask {
	position: absolute;
	inset: 0;
	background: rgba(var(--r), var(--g), var(--b), .3);
}

.sidebar-character .exp-fill {
	height: 100%;
	background: var(--rgb);
	transition: width 0.3s ease;
}

.avatar {
	width: 56px;
	height: 56px;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2D2962;
	border: 2px solid #fff;
	cursor: pointer;
	overflow: hidden;
	-webkit-transition: filter .3s;
	transition: filter .3s;
	filter: brightness(1);
	-webkit-filter: brightness(1);
}

.avatar:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.avatar-modal-content {
	width: 448px;
}

.avatar-description {
	font-size: 12px;
}

.modal-box-item.avatar-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 60px);
	gap: 8px;
	justify-content: space-between;
	max-height: 200px;
	overflow-y: scroll;
}

.modal-box-item.avatar-list .avatar {
	border-color: rgba(255, 255, 255, .5);
}

.modal-box-item.avatar-list .avatar-item.active .avatar {
	border-color: var(--color-mian);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.bubble-modal-content {
	width: 486px;
}

.modal-box-item.bubble-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	gap: 8px;
	justify-content: space-between;
	max-height: 200px;
	overflow-y: scroll;
}

.bubble-item {
	position: relative;
	min-width: 0;
	height: 80px;
	padding-bottom: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
	cursor: pointer;
	-webkit-transition: filter .3s;
	transition: filter .3s;
	filter: brightness(1);
	-webkit-filter: brightness(1);
	word-break: break-word;
	white-space: pre-wrap;
	font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
}

.bubble-item:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.bubble-item.active {
	border-color: var(--color-mian);
	background: rgb(0, 243, 205, .2);
}

.bubble-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 14px;
	text-align: center;
	line-height: 20px;
}

.bubble-item.active .bubble-name {
	color: var(--color-mian);
	font-weight: 500;
}

.email-modal-content {
	width: 320px;
}

.chat {
	position: relative;
	display: flex;
}

.chat.chat-center {
	margin-top: 6px;
}

.gutter {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	height: 6px;
	background-color: var(--rgb);
	cursor: n-resize;
	border-radius: 4px;
	opacity: 0;
	z-index: 1;
}

.chat.chat-right .gutter,
.chat.chat-left .gutter {
	top: 0;
	right: -6px;
	bottom: 0;
	left: -6px;
	width: 6px;
	height: auto;
	margin: 6px 0;
	cursor: e-resize;
}

.chat.chat-left .gutter {
	left: auto;
}

.gutter:hover {
	opacity: .8;
}

.chat-content {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
}

.chat.chat-left .chat-content {
	margin: 6px 0 6px 6px;
}

.chat.chat-center .chat-content {
	flex-direction: row;
}

.chat.chat-right .chat-content {
	margin: 6px 6px 6px 0;
}

.chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.chat-frame {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 6px;
	overflow-y: scroll;
}

.chat-msg {
	display: flex;
	gap: 8px;
}

.chat-msg.my {
	flex-direction: row-reverse;
}

.chat-avatar {
	width: 56px;
	min-width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2D2962;
	border: 2px solid #fff;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition: filter .3s;
	transition: filter .3s;
	filter: brightness(1);
	-webkit-filter: brightness(1);
}

.chat-avatar:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.avatar .actionicon,
.chat-avatar .actionicon {
	margin: 46px 0 0;
	transform: scale(2);
}

.chat-msg-center { 
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}
.chat-msg.my .chat-msg-center { 
	align-items: flex-end;
}

.chat-name {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
}

.chat-msg.my .chat-name {
	justify-content: flex-end;
	flex-direction: row-reverse;
}

.chat-name-text {
	font-size: 12px;
}
.chat-time{
	font-size: 12px;
	opacity: 0;
	transition: all .3s ease;
}
.chat-msg:hover .chat-time{
	opacity: .6;
}

.chat-bubble {
	position: relative;
	border-image-outset: 0;
	border-image-repeat: stretch;
}

.chat-bubble .at {
	color: #1890ff;
	font-weight: bold;
	border: 1px solid #1890ff;
	background: rgba(24, 144, 255, .3);
	padding: 0 4px;
	border-radius: 4px;
}

.chat-bubble .mini-item {
	margin: 1px 4px;
}

.chat-bubble-container {
	word-break: break-word;
	white-space: pre-wrap;
	font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	user-select: text;
}

.chat-emoji-container {
	width: 100px;
	height: 100px;
	image-rendering: auto;
	background-size: cover;
	border-radius: 6px;
}

.chat-emoji {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s ease;
}

.chat-emoji:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}

.chat-emoji:before {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: -2px;
	pointer-events: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -84px -28px;
}

.emoji-panel {
	display: flex;
	flex-direction: column;
	min-height: 350px;
	z-index: 102;
	backdrop-filter: blur(6px);
}

.emoji-tabs {
	display: flex;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	margin: 4px 2px;
	padding: 2px;
}

.emoji-tab {
	position: relative;
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease;
	border: 2px solid transparent;
	text-align: center;
	padding: 2px;
}

.emoji-tab:hover {
	background-color: rgba(0, 0, 0, .5);
}

.emoji-tab.active {
	background-color: rgba(0, 0, 0, .5);
	border-color: rgba(var(--r), var(--g), var(--b), .5);
}

.emoji-icon {
	width: 24px;
	height: 24px;
	image-rendering: auto;
	background-size: cover;
	border-radius: 50%;
}

.emoji-content {
	flex: 1;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	padding: 8px;
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 64px);
	grid-auto-rows: 64px;
	justify-content: center;
	gap: 4px;
	overflow-y: auto;
	height: auto;
	min-height: 0;
	box-sizing: border-box;
	flex: 1;
}

.emoji-item {
	image-rendering: auto;
	background-size: cover;
	position: relative;
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s ease;
	width: 64px;
	height: 64px;
}

.emoji-item:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .3);
}

.emoji-item img {
	width: 100%;
	height: 100%;
}

.emoji-grid-preview {
	position: fixed;
	z-index: 10000;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transform: translate(-50%, -100%);
}

.emoji-grid-preview.below {
	transform: translate(-50%, 0);
}

.emoji-grid-preview-inner {
	width: 128px;
	height: 128px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	animation: emojiPreviewIn .15s ease-out both;
}

.emoji-grid-preview-label {
	background: rgba(0, 0, 0, .8);
	color: #fff;
	padding: 4px 8px;
	border-radius: 6px;
	height: 20px;
	line-height: 20px;
	white-space: nowrap;
}

@keyframes emojiPreviewIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.chat-input-box {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px;
	margin: 4px;
}

.chat-input {
	flex: 1;
	border-radius: 4px;
}

.btn.chat-btn {
	border: 0;
	min-width: 40px;
	padding: 4px 12px;
	font-size: 14px;
	border-radius: 4px;
}

.chat-sidebar {
	display: flex;
	margin: 4px;
	border-radius: 4px;
	padding: 2px;
	align-items: center;
}

.chat.chat-center .chat-sidebar {
	flex-direction: column;
	width: 60px;
	align-items: flex-end;
	margin-left: 0;
}

.chat-tab {
	display: flex;
	gap: 4px;
	padding: 2px;
	font-size: 14px;
	flex: 1;
}

.chat.chat-center .chat-tab {
	flex-direction: column;
}

.chat-tab .page-tab-item {
	margin: 0;
}
.chat-btns {
	display: flex;
	gap: 4px;
}
.chat-open {
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 110;
	font-size: 18px;
	user-select: none;
	touch-action: none;
	transition: all 0.2s;
	left: 20px;
	bottom: 20px;
	color: #fff;
	border: 2px solid var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
	background-image: linear-gradient(180deg, rgba(9, 38, 83, .6), rgba(9, 99, 117, .6));
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: all .2s ease;
}

.chat-open:before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	background: linear-gradient(#fff 50%, #000 50%);
	background-size: 100% 5px;
	opacity: .1;
	z-index: -1;
	border-radius: 50%;
}

.chat-open:after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 2px solid var(--rgb);
	background-color: rgba(59, 233, 211, .5);
	opacity: .3;
	z-index: -1;
	border-radius: 50%;
}

.chat-open.dragging,
.chat-open:active {
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
	transform: scale(1.1);
	z-index: 10000;
}

.chat-open i {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: 6px;
	pointer-events: none;
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
	background-position: -28px -28px;
}

.mall-page-item {
	flex-direction: column;
	padding: 12px;
	gap: 8px;
}

.mall-page-item.active {
	display: flex;
}

.mall-list {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.mall-list-content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
	grid-template-rows: max-content;
	justify-content: start;
	gap: 8px;
	overflow-y: auto;
	max-height: 100%;
	box-sizing: border-box;
	will-change: transform;
	content-visibility: auto;
}

.mall-item {
	position: relative;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .6);
	border-radius: 8px;
	padding: 8px;
	backdrop-filter: blur(6px);
	display: flex;
	gap: 8px;
	transition: all .2s ease;
	cursor: pointer;
	overflow: hidden;
}

.mall-item:hover {
	border-color: var(--color-mian);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.mall-item.unlocked:hover {
	border-color: rgba(255, 255, 255, .2);
	box-shadow: unset;
}

.mall-item:after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, #092653, #096375);
	opacity: .3;
	z-index: -1;
	border-radius: 6px;
	transition: all .2s ease;
}

.mall-item.unlocked {
	opacity: .6;
	border-color: rgba(var(--r), var(--g), var(--b), .2);
}

.mall-item.limit-reached {
	opacity: .5;
	border-color: rgba(255, 255, 255, .1);
	cursor: not-allowed;
}

.mall-item.limit-reached:hover {
	border-color: rgba(255, 255, 255, .1);
	box-shadow: unset;
}

.mall-limit-count {
	font-size: 11px;
	color: #FFE069;
	margin-top: 2px;
}

.mall-limit-tip {
	font-size: 13px;
	color: #FFE069;
	text-align: center;
	margin-bottom: 8px;
}

.mall-name,
.mall-icon,
.mall-price {
	z-index: 10;
}

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

.mall-icon .chat-avatar {
	background: transparent;
	border: 0;
	border-radius: 4px;
}

.mall-bubble {
	word-break: break-word;
	white-space: pre-wrap;
	font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	width: 90px;
}

.mall-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mall-name {
	padding-top: 8px;
	text-align: left;
	font-size: 14px;
}

.buy-name {
	padding-top: 8px;
	text-align: center;
}

.mall-description {
	text-align: center;
	font-size: 12px;
	font-family: auto;
	color: var(--color-minor);
}

.mall-price {
	display: flex;
	align-items: center;
	height: 20px;
	gap: 4px;
}

.mall-info .mall-price {
	font-size: 12px;
	gap: 0;
}

.mall-price .item-icon {
	width: 28px;
	height: 28px;
	transform: scale(.65);
	margin: 0 -4px;
}

.mall-price .itemicon {
	transform: scale(1);
}

.mall-price-value {
	font-weight: 500;
	color: var(--color-mian);
}

.mall-price-value.error,
.mall-price-value.high {
	color: #FF4B88;
}

.mall-empty {
	text-align: center;
	font-size: 26px;
	opacity: .6;
	color: #fff;
	grid-column: 1 / -1;
}

.mall-color {
	width: 56px;
	min-width: 56px;
	height: 56px;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.mall-color .character-name {
	width: 100%;
	height: 100%;
	background-clip: initial;
}

.mall-icon .mall-service {
	border-radius: 4px;
	width: 56px;
	min-width: 56px;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}

.service-item {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/service_icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}

.service-2 {
	background-position: -168px 0;
}

.service-3 {
	background-position: -196px 0;
}

.service-4 {
	background-position: -140px 0;
}

.service-5 {
	background-position: -28px 0;
}

.service-6 {
	background-position: -56px 0;
}

.service-7 {
	background-position: -84px 0;
}

.service-8 {
	background-position: -112px 0;
}

.service-9 {
	background-position: -224px 0;
}
.page-detail {
	flex: 1;
	padding: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.planet-page-title {
	display: flex;
	align-items: center;
	font-size: 18px;
}
.planet-icon {
	position: relative;
	width: 56px;
	height: 56px;
}
.planet-icon::before {
	content: '';
	position: absolute;
	inset: 14px;
	width: 28px;
	height: 28px;
	background-image: url(../images/planet_icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
}
.planet-1::before {
	background-position: -28px 0;
}
.planet-2::before {
	background-position: -56px 0;
}
.planet-3::before {
	background-position: -84px 0;
}
.planet-4::before {
	background-position: -112px 0;
}
.planet-5::before {
	background-position: -140px 0;
}
.planet-6::before {
	background-position: -168px 0;
}
.planet-7::before {
	background-position: -196px 0;
}
.battle-planet-name {
	display: flex;
	flex-direction: column;
}
.battle-planet-name .title{
	color: #75FBD6;
}
.battle-planet-name .info{
	font-size: 12px;
	gap: 4px;
}
.battle-planet-name .proficiency{
	font-size: 12px;
	gap: 4px;
	display: flex;
	align-items: center;
}
.battle-page-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}
.difficulty-selector {
	margin: 0;
}
.monster-icon.monster-icon-boss {
	transform: scale(2);
}
.monster-list-boss{
	display: flex;
}
.monster-list-boss .monster-card{
	width: 132px;
}
.monster-list-normal{
	display: flex;
	gap: 8px;
	height: 144px;
	align-content: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
}
.attributes-body,
.skill-body,
.battle-body {
	color: var(--color-minor);
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px;
	gap: 12px;
	overflow: auto;
}

.profile-page .battle-job {
	display: flex;
	align-items: center;
	gap: 6px;
}

.job-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.profile-page .job-grow {
	font-size: 36px;
	font-weight: 700;
}

.profile-page .job-levle {
	font-size: 12px;
}
.modal-content.profile-modal-content {
	width: 360px;
}
.profile-modal-content .modal-body{
	height: 600px;
	overflow: hidden;
}
.profile-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: scroll;
}
.profile-section{
	flex-direction: column;
}
.profile-section .job-exp{
	padding: 4px 8px;
}
.attributes-section {
	display: flex;
	flex-direction: column;
}
.attributes-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	flex-grow: revert;
	gap: 12px;
}

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

.job-exp {
	position: relative;
	padding: 10px 12px;
	margin-bottom: 5px;
	border-radius: 8px;
	transition: all .2s ease;
	overflow: hidden;
	background: #65619a;
}

.job-icon {
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.job-exp .job-icon {}

.job-exp .job-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	z-index: 5;
}

.job-exp .lv {
	font-size: 12px;
}

.job-exp .job-name-progress {
	margin-left: auto;
}

.job-progress-mask {
	position: absolute;
	inset: 2px;
	background: #000;
	border-radius: 8px;
	z-index: 2;
	opacity: .5;
}

.job-exp .job-progress-bar {
	position: absolute;
	inset: 0;
	background: var(--rgb);
}

.modal-box-item .title {
	padding: 8px 0;
}

.consumables-list {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.skill-main {
	overflow: hidden;
	flex: 1;
	flex-direction: column;
}

.skill-tree-header {
	padding: 8px;
	color: #75FBD6;
	display: flex;
	justify-content: space-between;
	border-radius: 6px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
}

.skill-tree-body {
	flex: 1;
	display: flex;
	overflow-y: scroll;
}

.skill-tree-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	border-radius: 6px;
}

.skill-tree-footer .text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.skill-tree-footer .title {
	font-size: 16px;
	color: #75FBD6;
}

.skill-tree-footer .tip {
	font-size: 12px;
}

.skill-tree-battle {
	display: flex;
	gap: 8px;
}

.skill-point {
	display: flex;
	gap: 8px;
	align-items: center;
}

.skill-tree-content {
	display: grid;
	vertical-align: top;
	grid-template-columns: repeat(auto-fill, 60px);
	grid-template-rows: max-content;
	justify-content: center;
	gap: 12px;
	overflow: auto;
	flex: 1;
}

.skill {
	position: relative;
	text-align: center;
	width: 56px;
	height: 56px;
	background: #000;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px;
	cursor: pointer;
	z-index: 1;
}

.skill.mini-skill {
	width: 28px;
	height: 28px;
}

.mini-skill .skillicon {
	transform: scale(1);
}

.skill.active {
	border-color: var(--rgb);
	z-index: 3;
}

.skill-lv {
	position: absolute;
	padding: 2px 6px;
	bottom: -10px;
	font-size: 12px;
	z-index: 11;
	font-weight: 700;
	pointer-events: none;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
	color: #fff;
	background: #26264A;
	border-radius: 4px;
}

.mini-skill .skill-lv {
	font-size: 10px;
	border-radius: 2px;
	padding: 0 2px;
	bottom: -4px;
	font-weight: 400;
}

.next-skill-2:after {
	position: absolute;
	content: '';
	top: 100%;
	width: 4px;
	height: 48px;
	background-color: var(--rgb);
	pointer-events: none;
}

.skill-info {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 256px;
	max-width: 300px;
	min-height: 80px;
	border-radius: 8px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(to bottom, #423c4f, #555563);
	box-shadow: 0 0 8px rgba(0, 0, 0, .6);
	outline: 1px solid rgba(255, 255, 255, .1);
	z-index: 1000;
	visibility: visible;
	pointer-events: none;
}

.skill-info-header {
	display: flex;
	gap: 10px;
	background: #2E2A37;
	padding: 16px;
}

.passive .skill-info-header {
	background: #00494F;
}

.skill-info-header-right {
	position: relative;
	flex: 1;
}

.skill-info-name {
	font-size: 18px;
	font-weight: 500;
}

.skill-info-mp {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 14px;
	color: #00D4FE;
}

.passive .skill-info-mp {
	color: #34FFD0;
}

.skill-info-require {
	display: flex;
	gap: 6px;
	font-size: 12px;
	padding-top: 4px;
}

.skill-info-require-list {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	column-gap: 8px;
}

.skill-info .disabled {
	color: #FF4B88;
}

.skill-info-description {
	padding-top: 4px;
	font-size: 14px;
}

.skill-info-description span {
	padding: 0 2px;
	display: contents;
}

.skill-info-content {
	margin: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.skill-info-content-item {
	flex: 1;
}

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

.skill-info-attribute-name {
	font-weight: 500;
	color: #C0C6DD;
}

.skill-info-attribute-data {
	display: flex;
	gap: 2px;
	font-size: 14px;
	color: #7CF9FB;
}

.skill-target {
	color: #FEDD33;
}

.skill-damage-0 {
	color: #34FFD0;
}

.skill-damage-1 {
	color: #F44336;
}

.skill-damage-2 {
	color: #de8cff;
}

.skill-attack_type-0 {
	color: #b8e9ff;
}

.skill-attack_type-1 {
	color: #F44336;
}

.skill-attack_type-2 {
	color: #de8cff;
}

.skill-attack_type-3 {
	color: #65ed7e;
}

.skill-percentage {
	color: #34FFD0;
}

.skill-duration {
	color: #00D4FE;
}

.element-1 {
	color: #71f3c5;
}

.element-2 {
	color: #fd7272;
}

.element-3 {
	color: #81d8ff;
}

.element-4 {
	color: #cba293;
}

.skill-tool {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: #0D3747;
	box-shadow: 2px 2px 0px rgba(0, 0, 0, .6);
	outline: 2px solid #34FFD0;
	z-index: 1;
	visibility: visible;
	padding: 4px 4px 4px 64px;
}

.skill-tool-content {
	display: flex;
	gap: 2px;
	height: 100%;
	align-items: stretch;
	justify-content: center;
}

.skill-btns {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.btn.skill-btn {
	border: 0;
	border-radius: 4px;
	flex: 1;
	padding: 0 8px;
	line-height: 26px;
	font-family: system-ui;
	font-weight: 700;
}

.battle-body {
	padding: 0;
}

.battle-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.battle-party {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}
.battle-party.self {
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.battle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100px;
	height: 164px;
	background-color: rgba(0, 0, 0, .5);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	border-radius: 6px;
}

.battle-card.die {
	opacity: .3;
}

/* 物理攻击效果 */
.battle-card.attacked-physical {
	animation: attacked-physical 0.5s ease-out;
}

/* 魔法攻击效果 */
.battle-card.attacked-magic {
	animation: attacked-magic 0.5s ease-out;
}

/* 真实伤害效果 */
.battle-card.attacked-true {
	animation: attacked-true 0.5s ease-out;
}

/* 治疗效果 */
.battle-card.healed {
	animation: healed 0.5s ease-out;
}

/* 攻击动画 */
@keyframes attacked-physical {
	0% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	25% {
		transform: translateX(-10px);
		box-shadow: 0 0 20px rgba(255, 100, 100, 0.8);
		border-color: rgba(255, 100, 100, 0.8);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-color: rgba(var(--r), var(--g), var(--b), 0.5);
	}
}

@keyframes attacked-magic {
	0% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	25% {
		transform: translateX(-10px);
		box-shadow: 0 0 20px rgba(100, 100, 255, 0.8);
		border-color: rgba(100, 100, 255, 0.8);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-color: rgba(var(--r), var(--g), var(--b), 0.5);
	}
}

@keyframes attacked-true {
	0% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	25% {
		transform: translateX(-10px);
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
		border-color: rgba(255, 255, 255, 0.8);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-color: rgba(var(--r), var(--g), var(--b), 0.5);
	}
}

/* 治疗动画 */
@keyframes healed {
	0% {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	50% {
		box-shadow: 0 0 20px rgba(100, 255, 100, 0.8);
		border-color: rgba(100, 255, 100, 0.8);
	}
	100% {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-color: rgba(var(--r), var(--g), var(--b), 0.5);
	}
}

/* 治疗圣光效果 */
.battle-card.healed::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(100, 255, 100, 0.6), transparent);
	animation: healing-light 1s ease-out;
	pointer-events: none;
	z-index: 1;
}

@keyframes healing-light {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.battle-card-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	padding: 4px;
}

.battle-card-icon .monster-icon {
	transform: scale(1);
}

.battle-avatar-player {
	width: 56px;
	min-width: 56px;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.battle-card-info {}

.battle-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	position: relative;
	border-bottom: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	color: #75FBD6;
	text-align: center;
}

.battle-card-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monster-type {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(/static/images/icon.png);
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	margin: -2px;
	flex: 0 0 auto;
}

.monster-type.monster-type-0 {
	background-position: -168px -112px;
}

.monster-type.monster-type-1 {
	background-position: -196px -112px;
}

.battle-card-title .job-icon {
	margin: -2px;
	flex: 0 0 auto;
}

.battle-card-status {
	display: flex;
	flex-direction: column;
	height: 24px;
	gap: 2px;
	padding: 2px;
}

.battle-card-progress {
	position: relative;
	background: rgba(0, 0, 0, .5);
	flex: 1;
	border-radius: 2px;
	overflow: hidden;
	text-align: center;
	font-size: 12px;
	font-family: system-ui;
	height: 16px;
	line-height: 16px;
}

.battle-card-bar {
	width: 50%;
	height: 100%;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: #ff3434 0px 0px 10px;
	background: linear-gradient(90deg, #ff3458, #ff3ecd);
}

.battle-card-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	border-radius: 2px;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(90deg, rgba(150, 235, 255, .9), rgba(205, 250, 255, .9));
	box-shadow: rgba(150, 235, 255, .9) 0px 0px 10px;
	transition: width .2s ease;
}

.mp .battle-card-bar {
	box-shadow: #23e6ff 0px 0px 10px;
	background: linear-gradient(90deg, #2196F3, #23e6ff);
}

.mp.restore .battle-card-bar {
	box-shadow: #979797 0px 0px 10px;
	background: linear-gradient(90deg, #cfcfcf, #838383);
}

.battle-card-progress.hp.invincible-shield {
	position: relative;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
	outline: 1px solid #FFD700;
	outline-offset: -1px;
}

.battle-card-progress.hp.invincible-shield::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.25), rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.25), rgba(255, 215, 0, 0.5));
	background-size: 200% 200%;
	animation: slackin 5s linear infinite;
	pointer-events: none;
	z-index: 1;
}

.battle-card-progress.hp.invincible-shield::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(315deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: reflectionFlash 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}

.battle-card-progress.hp.invincible-shield .battle-card-value {
	z-index: 3;
}

.battle-card-value {
	position: absolute;
	inset: 0;
	z-index: 3;
	line-height: 100%;
	color: #fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.battle-card-value.berserker {
	box-shadow: #FF9800 0px 0px 10px;
	background: linear-gradient(90deg, #FF5722, #FF9800);
}

.battle-card-skills {
	display: grid;
	grid-template-columns: repeat(auto-fill, 32px);
	grid-template-rows: max-content;
	gap: 2px;
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.battle-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.battle-log-container {
	margin: 8px;
	height: 200px;
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), .5);
}

.battle-log {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.4;
}

.battle-log-entry {
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	display: flex;
	gap: 2px;
	flex-direction: column;
}
.battle-log-divider {
	color: #ffd700;
	text-align: center;
	padding: 4px 0;
	font-size: 13px;
	border-top: 1px solid rgba(255, 215, 0, 0.3);
	border-bottom: 1px solid rgba(255, 215, 0, 0.3);
	margin: 6px 0;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.battle-log-main{
	display: flex;
	align-items: center;
}
.battle-log-sub{
	padding-left: 12px
}
.battle-log-sub-entry {
	display: flex;
	align-items: center;
}
.battle-log-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.battle-log-name {
	font-weight: bold;
	vertical-align: middle;
}

.battle-log-content {
	vertical-align: middle;
}

.battle-float {
	position: absolute;
	pointer-events: none;
	z-index: 10;
	user-select: none;
}

.battle-float.damage {
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-size: 16px;
	animation: floatUp 2s linear forwards;
}

.damage-0 {
	color: #fff;
}

.damage-1 {
	color: #f00;
}

.damage-2 {
	color: #f0f;
}

.damage-3 {
	color: #0f0;
}

.battle-float.damage.critical {
	color: #ff0;
	animation: criticalFloatUp 2s linear forwards;
}

.battle-float.shield {
	color: #9fe8ff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-size: 16px;
	animation: floatUp 2s linear forwards;
}

@keyframes criticalFloatUp {
	0% {
		transform: translate(-50%, -50%) scale(3) translateY(0px);
		opacity: 1;
	}
	15% {
		transform: translate(-50%, -50%) scale(1) translateY(0px);
		opacity: 1;
	}

	60% {
		transform: translate(-50%, -120%) translateY(-30px);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -150%) translateY(-50px);
		opacity: 0;
	}
}

@keyframes floatUp {
	0% {
		transform: translate(-50%, -50%) translateY(0px);
		opacity: 1;
	}

	60% {
		transform: translate(-50%, -120%) translateY(-30px);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -150%) translateY(-50px);
		opacity: 0;
	}
}

.battle-float.status {
	width: 28px;
	height: 28px;
	border: 2px solid #fff;
	border-radius: 4px;
}

.status-add {
	animation: statusAdd 2s forwards;
}

.status-remove {
	animation: statusRemove 2s linear forwards;
}

@keyframes statusAdd {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.3);
	}

	50% {
		opacity: 1;
		transform: translateY(-10px) scale(1.2);
	}

	100% {
		opacity: 0;
		transform: translateY(-30px) scale(0.8);
	}
}

@keyframes statusRemove {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateY(15px) scale(1);
		/* 前半段：只向下移动 15px，不缩放不变透明 */
		opacity: 1;
	}

	100% {
		transform: translateY(30px) scale(0.3);
		/* 后半段：再移动 15px，同时缩小+淡出 */
		opacity: 0;
	}
}

/*setting*/
.setting {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.setting-page {
	flex: 1;
	padding: 12px;
	display: flex;
	overflow: hidden;
}

.setting-content {
	position: relative;
	flex: 1;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-title {
	display: flex;
	position: relative;
	color: #74F9BC;
	font-size: 24px;
	line-height: 18px;
	font-weight: 500;
	padding-left: 12px;
	margin: 4px 0 8px;
}

.section-title:after {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	background-color: #74F9BC;
}

.setting-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.setting-item {
	display: flex;
	gap: 8px;
	align-items: center;
}

.setting-name {
	width: 100px;
	text-align: right;
	font-weight: 500;
}

.setting-name.help {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.setting-name.help .icon-help {
	margin-left: 0;
}

.setting-input {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.setting-input.row{
	flex-direction: row;
	align-items: center;
}
.account-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.setting-bubble {
	cursor: pointer;
}

.efficiency-info {
	color: var(--color-minor);
}

.name-modal-content {
	width: 500px;
}

.modal-box-item.color-list {
	display: flex;
	gap: 8px;
	max-height: 360px;
	overflow-y: scroll;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.color-item {
	position: relative;
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	border: 2px solid rgba(var(--r), var(--g), var(--b), .3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, .3);
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	border-radius: 6px;
	padding: 2px 4px;
	cursor: pointer;
	justify-content: center;
	transition: all .2s ease;
}

.color-item:hover {
	background-color: rgba(var(--r), var(--g), var(--b), .2);
}

.color-item.active {
	background-color: rgba(var(--r), var(--g), var(--b), .25);
	border-color: var(--color-mian);
	box-shadow: 0 0 9px rgba(var(--r), var(--g), var(--b), .8);
}

.color-name {
	font-size: 12px;
	color: #D8FDFE;
}

/*************************/
.sidebar-open {
	display: none;
	width: 40px;
	height: 40px;
	right: -40px;
	position: absolute;
	bottom: 0;
	margin-bottom: calc(40px + env(safe-area-inset-bottom));
	margin-bottom: calc(40px + constant(safe-area-inset-bottom));
	border-radius: 8px;
	background: #092653;
	color: #fff;
	border: 2px solid var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px var(--rgb);
}

.sidebar-open:after {
	content: '';
	position: absolute;
	background: var(--rgb);
	width: 20px;
	left: 10px;
	top: 18px;
	height: 4px;
	border-left: 0;
	border-right: 0;
	box-shadow: 0 -8px 0 0 var(--rgb), 0 8px 0 0 var(--rgb);
}

.inventory-open {
	display: none;
	width: 40px;
	height: 40px;
	left: -42px;
	position: absolute;
	bottom: 0;
	margin-bottom: calc(40px + env(safe-area-inset-bottom));
	margin-bottom: calc(40px + constant(safe-area-inset-bottom));
	border-radius: 8px 0 0 8px;
	background: #092653;
	color: #fff;
	border: 2px solid var(--rgb);
	box-shadow: inset 0px 0px 2px #092653, 0 0 9px var(--rgb);
}

.inventory-open:before {
	content: "";
	position: absolute;
	background-color: transparent;
	margin: 6px;
	pointer-events: none;
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6));
	background-position: -140px 0;
}
.inventory-close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
}

.inventory-close::before,
.inventory-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	transition: all .3s ease;
}

.inventory-close::before {
	transform: translateY(-50%) rotate(45deg);
}

.inventory-close::after {
	transform: translateY(-50%) rotate(-45deg);
}

.modal-content.hack-modal-content {
	width: 800px;
	background: rgba(10, 15, 20, 0.9);
	border: 1px solid rgba(0, 255, 157, 0.5);
	box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
	border-radius: 0;
}

.hack-modal-content .modal-header {
	border-bottom: 1px solid rgba(0, 255, 157, 0.3);
}

.hack-modal-content .modal-title {
	font-weight: bold;
	text-shadow: 0 0 5px #00ff9d;
	color: #00ff9d;
}

.hack-modal-content .close-modal {
	font-size: 0;
	background-color: #ff5f57;
	width: 12px;
	height: 12px;
	border-radius: 50%
}

.hack-modal-content .modal-body {
	padding: 10px;
}

.modal-content.hack-modal-content:before,
.modal-content.hack-modal-content:after,
.hack-modal-content .modal-body:before,
.hack-modal-content .modal-body:after {
	display: none;
}

.cmd-window {
	height: 600px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-size: 14px;
	font-family: system-ui;
}

.cmd-window a {
	color: #75FBD6;
}

.cmd-output {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 10px;
}

.cmd-output::-webkit-scrollbar {
	width: 8px;
}

.cmd-output::-webkit-scrollbar-track {
	background: rgba(0, 20, 30, 0.5);
}

.cmd-output::-webkit-scrollbar-thumb {
	background: rgba(0, 255, 157, 0.3);
	border-radius: 0;
}

.cmd-output::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 255, 157, 0.5);
}

.cmd-input {
	display: flex;
	align-items: center;
	border-top: 1px solid rgba(0, 255, 157, 0.2);
	padding-top: 10px;
}

.prompt {
	display: contents;
	color: #ff0080;
	margin-right: 10px;
	white-space: nowrap;
}

.user {
	color: #00ccff;
}

.host {
	color: #00ff9d;
}

.path {
	color: #ffcc00;
}

.command-input {
	background: transparent;
	border: none;
	outline: none;
	color: #ffffff;
	flex: 1;
	padding: 5px 0;
	caret-color: #00ff9d;
	font-size: 14px;
	font-family: system-ui;
}

.output-line {
	margin-left: 20px;
	margin-bottom: 8px;
	line-height: 1.4;
	word-break: break-all;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.command-line {
	margin-bottom: 5px;
}

.command-text {
	color: #ffffff;
	word-break: break-all;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display: inline;
}

.output-text {
	color: #a0a0ff;
}

.output-success {
	color: #00ff9d;
}

.output-error {
	color: #ff5555;
}

.output-warning {
	color: #ffcc00;
}

/* ============ 种植系统 ============ */
.plant-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.plant-accordion-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 8px;
	gap: 6px;
	overflow: hidden;
}
/* 手风琴组 */
.accordion-group {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background: rgba(var(--r), var(--g), var(--b), 0.05);
	border: 2px solid rgba(var(--r), var(--g), var(--b), 0.1);
	overflow: hidden;
}
.accordion-group.active {
	border-color: rgba(var(--r), var(--g), var(--b), 0.3);
}
.accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s;
}
.accordion-header:hover {
	background: rgba(var(--r), var(--g), var(--b), 0.08);
}
.accordion-header.ele-1 { background: rgba(79, 195, 247, 0.06); }
.accordion-header.ele-2 { background: rgba(41, 182, 246, 0.06); }
.accordion-header.ele-3 { background: rgba(239, 83, 80, 0.06); }
.accordion-header.ele-4 { background: rgba(141, 110, 99, 0.06); }
.pa-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.plant-title{
	display: flex;
	flex-direction: column;
}
.pa-name {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 150px;
}
.pa-meta {
	font-size: 11px;
	color: var(--color-minor);
}
.pa-header-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.pa-badge {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 8px;
	background: rgba(var(--r), var(--g), var(--b), 0.15);
	color: var(--color-minor);
}
.pa-badge.pa-ready { background: rgba(255, 224, 105, 0.15); color: #FFE069; }
.pa-bonus {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 8px;
	margin-left: 2px;
}
.pa-bonus-plus { background: rgba(105, 255, 105, 0.15); color: #6f6; }
.pa-bonus-minus { background: rgba(255, 105, 105, 0.15); color: #f66; }

.accordion-content {
	flex: 1;
	display: none;
	padding: 8px;
	border-top: 2px solid rgba(var(--r), var(--g), var(--b), 0.1);
	overflow-y: scroll;
}
.accordion-group.active .accordion-content {
	display: block;
}

/* 租赁按钮 */
.plant-add-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 2px dashed rgba(var(--r), var(--g), var(--b), 0.3);
	border-radius: 8px;
	cursor: pointer;
	color: var(--color-minor);
	transition: all 0.15s;
}
.plant-add-btn:hover {
	border-color: var(--rgb);
	color: var(--rgb);
}
.plant-add-btn.pending {
	border-color: var(--rgb);
	background: rgba(var(--r), var(--g), var(--b), 0.06);
}
.plant-add-btn.locked {
	color: rgba(var(--r), var(--g), var(--b), .6);
	cursor: not-allowed;
	background: rgba(0, 0, 0, .1);
}
.plant-add-btn .add-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px dashed rgba(var(--r), var(--g), var(--b), 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
}
.plant-add-btn .add-info { flex: 1; }
.plant-add-btn .add-meta {
	font-size: 11px;
	margin-top: 2px;
}

/* 农田 */
.plant-farm {
	margin-top: 10px;
	padding: 10px;
	border-radius: 8px;
	background: rgba(var(--r), var(--g), var(--b), 0.05);
	border: 1px solid rgba(var(--r), var(--g), var(--b), 0.1);
}
.plant-farm:first-child {
	margin-top: 0;
}
.plant-farm-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.farm-soil-box {
	display: flex;
	align-items: center;
}
.soil-empty-picker {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 300;
	color: #555;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.25);
	border: 1px dashed rgba(var(--r), var(--g), var(--b), 0.2);
	transition: all 0.15s;
}
.soil-empty-picker:hover { border-style: solid; border-color: var(--rgb); color: var(--rgb); }
.plant-farm-header .farm-btn-group {
	display: flex;
	gap: 4px;
	margin-left: auto;
}
.plant-mini-btn {
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid rgba(var(--r), var(--g), var(--b), 0.2);
	background: transparent;
	color: var(--color-minor);
	transition: all 0.15s;
}
.plant-mini-btn:hover {
	border-color: var(--rgb);
	color: var(--rgb);
}
.plant-mini-btn.primary {
	background: var(--rgb);
	color: #000;
	border-color: var(--rgb);
}
.plant-mini-btn.primary:hover { opacity: 0.85; }

/* 地块网格 */
.plant-plots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 6px;
}
.plant-plot {
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	padding: 4px;
	transition: transform 0.1s;
	background: rgba(0, 0, 0, 0.3);
	border: 2px solid rgba(var(--r), var(--g), var(--b), 0.12);
	box-sizing: border-box;
}
.plant-plot:hover:not(.locked) { }

.plot-upper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	justify-content: center;
	width: 100%;
	height: 48px;
	z-index: 10;
}
.plot-lower {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1px;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

/* 空地块 */
.plant-plot.empty { background: rgba(60, 60, 60, 0.3); }
.plot-seed-picker {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
	background: rgba(0, 0, 0, .3);
	border: 1px dashed rgba(var(--r), var(--g), var(--b), .6);
	transition: all 0.15s;
}
.plot-seed-picker::before {
	position: absolute;
	content: '';
	left: 7px; top: 7px; right: 7px; bottom: 7px;
	background: linear-gradient(0, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%),
	            linear-gradient(90deg, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%);
	opacity: .4;
}
.plot-seed-picker:hover { border-style: solid; border-color: var(--rgb); }
.plot-seed-picker:hover::before {
	background: linear-gradient(0, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%),
	            linear-gradient(90deg, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%);
	opacity: 1;
}

/* selected 本地已选种子 */
.plant-plot.selected { border-color: rgba(var(--r), var(--g), var(--b), 0.3); background: rgba(var(--r), var(--g), var(--b), 0.08); }

/* 物品缩略图 —— 统一小尺寸 */
.plot-seed-item, .plot-crop-item, .soil-item-box {
	width: 32px;
	height: 31px;
	cursor: pointer;
}

.plot-seed-item::before, .plot-crop-item::before, .soil-item-box::before {
	padding-bottom: 1px;
}
.plot-seed-item .itemicon,
.plot-crop-item .itemicon,
.soil-item-box .itemicon {
	width: 28px;
	height: 28px;
	transform: scale(1);
}
.plot-crop-item.ready { filter: brightness(1.1); }
.plot-seed-item .item-quantity,
.plot-crop-item .item-quantity {
	font-size: 9px;
	line-height: 1;
	right: 1px;
	bottom: 1px;
}
.soil-empty-picker::before {
	position: absolute;
	content: '';
	left: 8px; top: 8px; right: 8px; bottom: 8px;
	background: linear-gradient(0, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%),
	            linear-gradient(90deg, transparent 45%, var(--rgb) 45%, var(--rgb) 55%, transparent 55%);
	opacity: .4;
}
.soil-empty-picker:hover { border-style: solid; border-color: var(--rgb); }
.soil-empty-picker:hover::before {
	opacity: 1;
}

/* growing */
.plant-plot.growing {
	background: rgba(var(--r), var(--g), var(--b), 0.1);
	color: #fff;
}
/* 状态小标签 */
.plot-state-label {
	font-size: 10px;
	color: var(--color-minor);
	text-align: center;
	line-height: 1;
}
/* growing 进度信息 */
.plant-plot.growing .plot-time {
	font-size: 10px;
	color: var(--color-minor);
	text-align: center;
	z-index: 5;
}
.plant-plot.growing .plot-progress {
	position: absolute;
	border-radius: 6px;
	overflow: hidden;
	inset: -2px;
}
.plant-plot.growing .plot-progress:after{
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .6);
	
}
.plant-plot.growing .plot-progress-bar {
	position: absolute;
	inset: 0;
	height: 100%;
	background: #FFE069;
	transition: width 0.5s;
}

/* ready */
.plant-plot.ready {
	background: rgba(255, 224, 105, 0.15);
	border-color: #FFE069;
}
.plot-btn {
	font-size: 11px;
	padding: 2px 10px;
	border-radius: 3px;
	cursor: pointer;
	background: var(--rgb);
	color: #000;
	border: none;
	line-height: 1.4;
}
.plot-btn:hover { opacity: 0.85; }

.plot-harvest-btn {
	background: #FFE069;
}

.plot-expand-price {
	font-size: 11px;
	color: var(--color-minor);
	line-height: 1.2;
	text-align: center;
	word-break: break-all;
}
.plot-locked-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 18px;
	line-height: 1;
	color: rgba(160, 160, 160, .5);
}
.plot-auto-btn {
	position: absolute;
	top: 0px;
	right: 0px;
	background: rgba(200, 200, 200, .35);
	cursor: pointer;
	line-height: 1;
	z-index: 5;
	transition: all .15s;
	border-radius: 50%;
	width: 6px;
	height: 6px;
	border: 2px solid rgba(200, 200, 200, .35);
}
.plot-auto-btn:hover {
	background: rgba(var(--r), var(--g), var(--b), .8);
}
.plot-auto-btn.active {
	background: rgba(var(--r), var(--g), var(--b), .8);
	animation: plot-auto-pulse 1s ease-in-out infinite;
	border-color: rgba(var(--r), var(--g), var(--b), 1);
}
@keyframes plot-auto-pulse {
	0%{
		box-shadow: 0 0 0 0 rgba(var(--r), var(--g), var(--b), .6);
	}
	100% {
		box-shadow: 0 0 0 4px rgba(var(--r), var(--g), var(--b), 0);
	}
}

/* 种植帮助 */
.plant-help {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 284px;
}
.plant-help .ph-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: 1.45;
	font-size: 13px;
}
.plant-help .ph-label {
	flex: none;
	min-width: 58px;
	padding: 1px 0;
	border-radius: 3px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: rgba(var(--r), var(--g), var(--b), .25);
}
.plant-help .ph-text { color: #C0C6DD; }
.plant-help .ph-hl { color: #FFD166; }
.plant-help .ph-pos { color: #81C784; }
.plant-help .ph-neg { color: #EF5350; }

/* 元素色头像（文字版） */
.plant-avatar-text {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}
.plant-candidate .planet-avatar.ele-0 { background: #555; }
.plant-candidate .planet-avatar.ele-1 { background: #4FC3F7; }
.plant-candidate .planet-avatar.ele-2 { background: #29B6F6; }
.plant-candidate .planet-avatar.ele-3 { background: #EF5350; }
.plant-candidate .planet-avatar.ele-4 { background: #8D6E63; }

/* 租赁候选弹窗 */
.lease-price-row {
	text-align: center;
	font-size: 13px;
	color: var(--color-minor);
	margin-bottom: 8px;
}
.lease-price-row .lease-price-amount {
	color: var(--rgb);
	font-weight: 600;
}
.lease-candidates {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.plant-candidate {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), 0.15);
	cursor: pointer;
	transition: all 0.15s;
}
.plant-candidate:hover { border-color: var(--rgb); }
.plant-candidate .planet-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}
.plant-candidate .cand-info { flex: 1; }
.plant-candidate .cand-name {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}
.plant-candidate .cand-meta {
	font-size: 11px;
	color: var(--color-minor);
	margin-top: 2px;
}
.plant-candidate .cand-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.plant-element-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}
.plant-element-icon.ele-0 { background: #555; }
.plant-element-icon.ele-1 { background: #4FC3F7; }
.plant-element-icon.ele-2 { background: #29B6F6; }
.plant-element-icon.ele-3 { background: #EF5350; }
.plant-element-icon.ele-4 { background: #8D6E63; }



.friend-list-body {
	color: var(--color-minor);
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px;
	gap: 12px;
	overflow: auto;
}
.friend-btns {
	display: flex;
	margin-left: auto;
	gap: 6px;
}
.friend-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow-y: scroll;
}

.user-item {
	position: relative;
	padding: 8px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .2);
	display: flex;
	gap: 8px;
	border-radius: 6px;
    align-items: center;
    transition: all .3s ease;
}
.user-avatar {
	position: relative;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #666;
    border: 2px solid #333;
}
.online-indicator.online {
    background-color: #4CAF50;
}
.online-indicator.status-hidden {
    background-color: #FFC107;
}
.online-indicator.offline {
    background-color: #888;
}

.user-info {
    flex: 1;
}

.user-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.user-title{
    font-size: 12px;
}
.user-level {
	color: #75FBD6;
    font-size: 14px;
}

.user-actions {
    display: flex;
    gap: 10px;
}

.user-action-btn {
    padding: 5px 10px;
    font-size: 12px;
}

.search-container {
    display: flex;
    gap: 10px;
}

.search-input {
    flex: 1;
    padding: 10px;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
	border: 0;
	padding: 0 20px;
}

.empty-message {
	text-align: center;
	color: var(--color-mian);
	opacity: .5;
	padding: 20px;
}

.loading-message {
	text-align: center;
	color: var(--rgb);
	padding: 20px;
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
@media only screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}

	.container {}

	.sidebar {
		position: fixed;
		z-index: 50;
		top: 0;
		bottom: 0;
		margin: 0;
		border-radius: 0;
		border: 0;
		border-right: 2px solid var(--rgb);
		box-shadow: unset;
		background: #092653;
		transition: transform .3s;
		transform: translateX(-100%);
	}

	.sidebar.active {
		transform: translateX(0)
	}.sidebar:after,
	.sidebar:before{
		display: none;
	}

	.sidebar-open {
		display: block;
	}

	.sidebar.active .sidebar-open {
		display: none;
	}

	.sidebar.active .sidebar-close {
		display: block;
	}

	.actions {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.main-center {
		padding: 4px;
		margin: 0;
	}

	.inventory {
		position: fixed;
		z-index: 50;
		top: 0;
		bottom: 0;
		margin: 0;
		border-radius: 0;
		box-shadow: unset;
		transition: transform .3s;
		transform: translateX(100%);
		width: 100%;
		overflow: visible;
		border: 0;
		backdrop-filter: blur(6px);
	}

	.inventory.active {
		transform: translateX(0)
	}

	.inventory-open,
	.inventory-close {
		display: block;
	}

	.inventory.active .inventory-open {
		display: block;
	}
	.attributes-body, .skill-body, .battle-body{
		padding: 6px;
		gap: 6px;
	}
	.attributes-main{
		gap:6px;
	}

	.skill-tree-content {
		grid-gap: 18px 8px;
	}

	.next-skill-2:after {
		height: 18px;
	}

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

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

	.alchemy-left {
		border: 0;
		flex-direction: row;
		width: 100%;
	}

	.item-selector {
		width: 96px;
	}

	.alchemy-info {
		flex: 1;
		padding-left: 0;
	}

	.chat {
		position: fixed;
		display: none;
		inset: 0;
		height: 100% !important;
		width: 100% !important;
		z-index: 101;
	}

	.chat.active {
		display: flex;
	}

	.gutter {
		display: none;
	}

	.chat-content {
		margin: 4px !important;
	}

	.chat-open {
		display: flex;
	}

	.hack-modal-content .modal-body {
		padding: 6px;
	}

	.cmd-window {
		padding: 4px;
		font-size: 12px;
	}

	.output-text {
		margin-left: 6px;
	}

	.output-line {
		margin-bottom: 4px;
	}

	.command-input {
		font-size: 12px;
	}
	.skill-tree-footer{
		flex-direction: column;
	}
	.skill-tree-footer .text{
		align-items: flex-start;
		text-align: center;
	}
}

/* 附魔系统样式 */
.enchantment-modal-content {
	max-width: 400px;
}

.modal-enchantment-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}
.modal-enchantment-container .item-info-enchantment{
	font-size: 14px;
}

.crystal-enchantments,.item-info-attribute-limits {
	flex-direction: column;
	gap: 2px;
}

.crystal-enchantments-title {
	color: #75FBD6;
	font-size: 12px;
	margin-bottom: 8px;
	text-align: center;
}
.crystal-enchantments-empty {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	text-align: center;
}

.modal-enchantment-result {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 30px;
}

.enchantment-result-info {
	text-align: left;
}

.enchantment-name {
	color: #FFD700;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 8px;
}

.enchantment-value {
	color: #75FBD6;
	font-size: 16px;
	margin-bottom: 4px;
}

/* 物品信息中的附魔样式 */
.item-info-enchantments {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.item-info-enchantment-info {
	color: #FFD700;
	font-size: 12px;
	margin-bottom: 8px;
}
.item-info-enchantment {
	position: relative;
	color: #75FBD6;
	font-size: 12px;
	padding: 2px 0 2px 16px;
}
.item-info-enchantment.not{
	color: rgba(255, 255, 255, .5);
}
.item-info-enchantment.active{
	color: #FFE069;
	text-shadow: 0 0 5px #FFE069, 0 0 10px #FFE069;
}
.item-info-enchantment.limit{
	color: #FF6B6B;
}
.item-info-enchantment.limit:before{
	background: #FF6B6B;
}
.item-info-enchantment:before{
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 12px;
	height: 12px;
	background: #75FBD6;
}
.item-info-enchantment.active:before{
	left: 0;
	top: 5px;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #FFE069;
	transition: all 0.3s ease;
	background: transparent;
	animation: arrow-pulse 1s ease-in-out infinite;
}
.item-info-enchantment.not:before{
	border-left-color: rgba(255, 255, 255, 0.6);
	opacity: .6;
}

@keyframes arrow-pulse {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	50% {
		transform: translateX(4px);
		opacity: 0.7;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
.item-info-enchantment.not:after{
	content: '';
	position: absolute;
	left: 2px;
	top: 5px;
	width: 8px;
	height: 8px;
	background: #000;
	opacity: .6;
}
.item-info-enchantment.disabled{
	opacity: .6;
	color: rgba(255, 255, 255, 0.5);
}
.item-info-enchantment.disabled:before{
	background: #fff;
}
.item-info-signature{
	margin: 12px;
	color: #FFD700;
	font-size: 12px;
}
.item-enchantments{
	position: absolute;
	inset: 5px;
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 2px;
	user-select: none;
}
.item-enchantment{
	height: 6px;
	width: 6px;
	background-color: var(--rgb);
}
.item-enchantment.not {
	background: rgba(255, 255, 255, .3);
}
.item-enchantment.limit {
	background: #FF6B6B;
}
.item-enchantment.disabled {
	background: #fff;
}

/* ==================== 任务系统 ==================== */

.mission-page {
	flex: 1;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap:8px;
	overflow: hidden;
}

.quest-list {
	display: grid;
	gap: 8px;
	overflow: auto;
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
	align-items: stretch;
}

.quest-item {
	padding: 12px;
}

.quest-header {
	display: flex;
	gap: 6px;
	flex-direction: column;
}
.quest-title {
	display: flex;
	gap: 6px;
	align-items: center;
}
.quest-name {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.quest-status {
	font-size: 14px;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 500;
}

.quest-status-1 {
	background: rgba(255, 215, 0, 0.2);
	color: #FFD700;
}

.quest-status-2 {
	background: rgba(50, 205, 50, 0.2);
	color: #32CD32;
}

.quest-status-0,.quest-status-new {
	background: rgba(147, 112, 219, 0.2);
	color: #9370DB;
}

.quest-status-grade {
	background: rgba(var(--r), var(--g), var(--b), .2);
	color: rgb(var(--r), var(--g), var(--b));
}
.quest-grade-list {
	font-size: 14px;
	margin-left: auto;
	background-color: rgba(var(--r), var(--g), var(--b), .1);
	color: rgb(var(--r), var(--g), var(--b));
	border: 1px solid rgba(var(--r), var(--g), var(--b), .3);
	border-radius: 6px;
	padding: 2px 5px;
	transition: all .3s ease;
	cursor: pointer;
}
.quest-grade-list:hover{
	background-color: rgba(var(--r), var(--g), var(--b), .2);
	border-color:rgba(var(--r), var(--g), var(--b), .5);
}
.quest-description {
	font-size: 14px;
	line-height: 1.5;
}

.quest-rewards {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.quest-rewards .item{
	cursor: pointer;
}
.quest-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.quest-btn {
	padding: 6px;
	min-width: 100px;
}

.no-quests {
	text-align: center;
	padding: 32px 12px;
	grid-column: 1 / -1;
	opacity: .7;
}
.quest-requirements {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.quest-objective {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.objective-title {
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.objective-title .objective-progress-text {
	color: rgba(255, 255, 255, 0.7);
}
.completed .objective-title .objective-progress-text {
	color: var(--rgb);
}
.objective-title span {
	background: rgba(255,224,105,.2);
	color: #FFE069;
	padding: 2px 4px;
	border-radius: 4px;
}

.objective-progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(var(--r), var(--g), var(--b), .2);
	overflow: hidden;
}

.objective-progress-fill {
	height: 100%;
	background: var(--rgb);
	transition: width 0.3s ease;
}

.quest-header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 8px;
}

.quest-info-left {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 14px;
}

.quest-timer {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin-left: auto;
}

/* ==================== 快速登录 ==================== */
.quick-login {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}
.quick-login-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border: 2px solid rgba(var(--r), var(--g), var(--b), .5);
	background: rgba(var(--r), var(--g), var(--b), .15);
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease;
}
.quick-login-box:hover {
	background: rgba(var(--r), var(--g), var(--b), .25);
	border-color: var(--color-mian);
}
.quick-login-avatar {
	flex: 0 0 auto;
}
.quick-login-avatar .avatar {
	pointer-events: none;
}
.quick-login-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.quick-login-name {
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.quick-login-tip {
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
}
.quick-login-remove {
	position: absolute;
	top: 6px;
	right: 8px;
	font-size: 16px;
	line-height: 1;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: color .2s ease;
}
.quick-login-remove:hover {
	color: #FF4B88;
}

.quest-icon-btn {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: all .2s ease;
	flex-shrink: 0;
}
.quest-icon-btn:hover {
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
}
.quest-icon-btn:before {
	content: '';
	position: absolute;
	background-color: transparent;
	margin: -2px;
	pointer-events: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-position: -140px -28px;
}

.quest-footer-btns {
	display: flex;
	align-items: center;
	gap: 8px;
}
.quest-footer-btns .quest-btn {
	flex: 1;
}
.quest-footer-btns .quest-reset-btn,
.quest-footer-btns .quest-abandon-btn {
	display: none;
	padding: 6px;
	text-align: center;
	justify-content: center;
	gap: 4px;
}
.quest-footer-btns.expanded .quest-btn {
	display: none;
}
.quest-footer-btns.expanded .quest-reset-btn {
	display: flex;
	flex: 2;
}
.quest-footer-btns.expanded .quest-abandon-btn {
	display: flex;
	flex: 1;
}
.quest-footer-btns .item-icon{
	width: 28px;
	height: 12px;
	transform: scale(.65);
	margin: 0 -4px;
}
.quest-footer-btns .item-icon .itemicon {
	transform: scale(1);
}

/* ===== 私聊模态框 ===== */
.modal-content.private-chat-modal {
	display: flex;
	flex-direction: column;
	width: 780px;
	max-width: 95vw;
	height: 560px;
	max-height: 85vh;
	padding: 0;
}
.private-chat-bipanel {
	flex: 1;
	min-height: 0;
}
.private-chat-body {
	
}
.private-chat-sidebar {
	
}
.private-chat-friend-list {
	flex: 1;
	overflow-y: auto;
}
.private-chat-friend-empty {
	padding: 24px;
	text-align: center;
	opacity: .5;
	font-size: 12px;
}
.private-chat-friend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	cursor: pointer;
	transition: background .15s;
	position: relative;
}
.private-chat-friend-item:hover {
	background: rgba(255,255,255,.04);
}
.private-chat-friend-item.active {
	background: rgba(255,255,255,.08);
}

.private-chat-friend-avatar {
	flex-shrink: 0;
}
.private-chat-friend-avatar .chat-avatar {
	border: 0;
}
.private-chat-friend-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.private-chat-friend-top {
	display: flex;
	align-items: center;
	gap: 6px;
}
.private-chat-friend-name {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.private-chat-friend-bottom {
	display: flex;
	align-items: center;
	gap: 6px;
}
.private-chat-friend-last {
	font-size: 11px;
	opacity: .6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.private-chat-unread {
	background: #e74c3c;
	color: #fff;
	font-size: 10px;
	border-radius: 10px;
	padding: 0 5px;
	min-width: 16px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	flex-shrink: 0;
	display: inline-block;
}

.private-chat-main {
	padding: 0;
}
.private-chat-main.private-chat-unselected {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.5);
	font-size: 13px;
}
.private-chat-main.private-chat-unselected > * {
	display: none;
}
.private-chat-main.private-chat-unselected::before {
	content: '请从左侧好友列表选择一个好友开始聊天';
}
.private-chat-header {
	padding: 8px 14px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	flex-shrink: 0;
}
.private-chat-header-info {
	display: flex;
	align-items: center;
}
.private-chat-header-name {
	font-size: 16px;
	font-weight: 600;
}
.private-chat-empty {
	opacity: .6;
	font-size: 13px;
}

.private-chat-frame {
	flex: 1;
	overflow-y: auto;
	padding: 10px 14px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.private-chat-input-area {
	flex-shrink: 0;
	padding: 8px 12px;
	border-top: 1px solid rgba(255,255,255,.06);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.private-chat-link-list {
	width: 100%;
	font-size: 11px;
	opacity: .6;
}
.private-chat-link-list:empty {
	display: none;
}
.private-chat-emoji-bar {
	display: flex;
	position: relative;
}
.private-chat-input {
	flex: 1;
	min-width: 0;
	max-height: 100px;
	resize: none;
	font-family: inherit;
	padding: 2px;
	background: transparent;
	border: 0;
	margin: 0;
}
.private-chat-btns {
	display: flex;
	justify-content: flex-end;
}
.private-chat-send-btn {
	padding: 6px 14px;
	background: rgba(100,149,237,.3);
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.private-chat-send-btn:hover {
	background: rgba(100,149,237,.5);
}


/* 响应式：窄屏 */
@media (max-width: 768px) {
	.modal-content.private-chat-modal {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	.modal-content.private-chat-modal .modal-header{
		padding-left: 10px;
	}
	.modal-content.private-chat-modal .modal-header:after{
		display: none;
	}
}