/* Modern theme inspired by ClassicConquer (conqueronline.net) */

:root{
	--bg:#0b0c10;
	--bg-alt:#121318;
	--surface:#161821;
	--surface-2:#1c1f2a;
	--primary:#5865F2;
	--primary-600:#4653da;
	--accent:#EAB308;
	--text:#e6e6e9;
	--muted:#a0a3ad;
	--success:#22c55e;
	--danger:#ef4444;
}

body{
	background: radial-gradient(60% 80% at 50% 0%, rgba(88,101,242,0.10) 0%, rgba(88,101,242,0) 60%) , var(--bg);
	color: var(--text);
	font-family: "OpenSans-Regular", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	scrollbar-width: thin;
	scrollbar-color: #c79a35 rgba(10,15,24,0.72);
}

*::-webkit-scrollbar{
	width: 12px;
	height: 12px;
}

*::-webkit-scrollbar-track{
	background:
		linear-gradient(180deg, rgba(18,26,39,0.92), rgba(8,12,19,0.94));
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

*::-webkit-scrollbar-thumb{
	min-height: 48px;
	border: 3px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(180deg, #f1ce68, #a66f19) padding-box,
		linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.2)) border-box;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 2px 8px rgba(0,0,0,0.28);
}

*::-webkit-scrollbar-thumb:hover{
	background:
		linear-gradient(180deg, #ffe082, #c98d25) padding-box,
		linear-gradient(180deg, rgba(255,255,255,0.24), rgba(0,0,0,0.24)) border-box;
}

*::-webkit-scrollbar-corner{
	background: transparent;
}

/* Header */
.site-header{
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000;
	backdrop-filter: blur(6px);
	background: rgba(12,13,18,0.65);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-header .topbar{
	background: linear-gradient(90deg, rgba(88,101,242,0.18), rgba(12,13,18,0.0));
	padding: 6px 0;
	font-size: 12px;
}

.site-header .topbar ul{
	margin: 0;
	padding: 0 16px;
	list-style: none;
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.site-header .topbar li{
	color: var(--muted);
}

.mainnav{
	background: transparent !important;
}

.mainnav .navbar-brand{
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--text) !important;
}

.mainnav .navbar-brand img{
	height: 36px;
	width: auto;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

.mainnav .nav-link{
	color: var(--text) !important;
	opacity: 0.85;
	padding: 12px 10px !important;
	white-space: nowrap;
}

.mainnav .navbar-nav{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
}

@media (min-width: 992px){
	.mainnav .navbar .container{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.mainnav .navbar-brand{
		flex: 0 0 auto;
		margin-right: 10px;
	}
	.mainnav .navbar-collapse{
		flex: 1 1 auto;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.mainnav .navbar-collapse::-webkit-scrollbar{
		height: 6px;
	}
	.mainnav .navbar-nav{
		flex-wrap: nowrap;
		margin-left: auto;
	}
	.mainnav .nav-item{
		flex: 0 0 auto;
	}
}

/* Left sidebar navigation on large screens */
@media (min-width: 1200px){
	.site-header{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 300px;
		height: 100vh;
		overflow: hidden;
		border-bottom: 0;
		border-right: 1px solid rgba(255,255,255,0.08);
		background: linear-gradient(180deg, rgba(10,13,22,0.97), rgba(12,16,28,0.97));
	}

	.site-header .topbar{
		display: none;
	}

	.mainnav{
		padding: 14px 12px 16px;
		height: 100%;
	}

	.mainnav .container{
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 0;
		max-width: none;
		overflow: visible;
	}

	.mainnav .navbar-toggler{
		display: none !important;
	}

	.mainnav .navbar-collapse{
		display: block !important;
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.mainnav .navbar-brand{
		display: flex;
		width: 100%;
		margin: 0 0 8px 0;
		padding: 8px 10px;
		border-radius: 12px;
		background: rgba(255,255,255,0.05);
	}
	.mainnav .navbar-brand img{
		height: 26px;
	}

	.sidebar-account-card{
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 9px;
		margin: 0 0 10px 0;
		border: 1px solid rgba(255,255,255,0.10);
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(25,33,51,0.90), rgba(16,22,36,0.90));
	}
	.sidebar-account-avatar{
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid rgba(88,101,242,0.65);
		box-shadow: 0 6px 16px rgba(0,0,0,0.35);
	}
	.sidebar-account-avatar img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.sidebar-account-meta{
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.sidebar-account-meta strong{
		font-size: 13px;
		line-height: 1.2;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sidebar-account-meta small{
		font-size: 10px;
		color: var(--muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sidebar-account-meta span{
		display: inline-block;
		margin-top: 3px;
		font-size: 10px;
		color: #c7d2fe;
		background: rgba(88,101,242,0.22);
		padding: 2px 8px;
		border-radius: 999px;
		width: fit-content;
	}

	.mainnav .navbar-nav{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 8px;
		margin-left: 0 !important;
	}
	.mainnav .mainnav-links{
		padding-bottom: 8px;
	}

	.mainnav .nav-item{
		width: 100%;
		margin: 0 !important;
		display: block;
	}
	.mainnav .mainnav-links .nav-item + .nav-item{
		margin-top: 0 !important;
	}

	.mainnav .nav-link{
		display: block;
		width: 100%;
		padding: 8px 10px !important;
		border-radius: 10px;
		background: rgba(255,255,255,0.02);
		border: 1px solid rgba(255,255,255,0.06);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
	}
	.mainnav .mainnav-links .nav-link::before{
		display: none !important;
		content: none !important;
	}
	.mainnav .nav-link:hover,
	.mainnav .nav-link:focus{
		background: rgba(88,101,242,0.20);
		border-color: rgba(88,101,242,0.45);
	}

	.mainnav .nav-link.cta{
		margin-left: 0;
		text-align: center;
		border-color: rgba(88,101,242,0.48);
		padding: 10px 10px !important;
	}
	.mainnav .badge-online{
		width: 100%;
		justify-content: center;
	}
	.mainnav .nav-status-item,
	.mainnav .badge-online{
		display: none !important;
	}

	body{
		padding-left: 300px;
	}
}

.mainnav .nav-link:hover,.mainnav .nav-link:focus{
	opacity: 1;
	color: #fff !important;
}

/* Online badge */
.badge-online{
	background: rgba(34,197,94,0.15);
	color: #bbf7d0;
	border: 1px solid rgba(34,197,94,0.35);
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
}
.badge-online .fa-circle{ color: #22c55e; font-size: 8px; margin-right: 6px; }
.badge-user .fa-user-check{ color: #60a5fa; font-size: 11px; margin-right: 6px; }

.mainnav .cta{
	background: var(--primary);
	color: #fff !important;
	border-radius: 8px;
	padding: 10px 14px !important;
	margin-left: 8px;
	transition: background .2s ease;
}

.mainnav .cta:hover{
	background: var(--primary-600);
}

/* Hero */
.hero{
	position: relative;
	width: 100%;
	min-height: 68vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hero .bg-video{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05) brightness(0.9);
	opacity: 0.55;
    z-index: 0;
}

.hero::after{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

.hero .content{
	position: relative;
	text-align: center;
	padding: 40px 16px;
	max-width: 980px;
    z-index: 2;
}

.hero h1{
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
	font-size: clamp(32px, 5vw, 56px);
	margin: 0 0 10px 0;
	color: #fff;
	text-shadow: 0 8px 30px rgba(0,0,0,0.65);
}

.hero p{
	font-size: clamp(14px, 2vw, 18px);
	color: var(--muted);
	margin: 0 0 20px 0;
}

.hero .actions{
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-primary-modern{
	background: var(--primary);
	color: #fff;
	border: none;
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 700;
	box-shadow: 0 6px 24px rgba(88,101,242,0.35);
}

.btn-primary-modern:hover{
	background: var(--primary-600);
}

.btn-ghost{
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	padding: 12px 18px;
	border-radius: 10px;
}

.btn-ghost:hover{
	border-color: #fff;
}

/* Floating chat */
.chat-dock{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1200;
	direction: rtl;
}

.chat-fab{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(201,169,106,0.45);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(18,28,42,0.96), rgba(31,47,68,0.96));
	color: #f4efe3;
	font-weight: 700;
	box-shadow: 0 18px 50px rgba(0,0,0,0.4);
	cursor: pointer;
}

.chat-fab:hover{
	transform: translateY(-1px);
}

.chat-fab__pulse{
	position: absolute;
	inset: -6px;
	border-radius: 22px;
	border: 1px solid rgba(201,169,106,0.18);
	animation: chatPulse 2.4s ease-out infinite;
}

.chat-fab__icon{
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(201,169,106,0.25), rgba(88,101,242,0.2));
	color: #f8ddb0;
}

.chat-fab__badge{
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 12px;
}

.chat-panel{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.985);
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
	padding: 0;
}

.chat-dock.is-open .chat-panel{
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.chat-dock.is-open .chat-fab{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.chat-panel__shell{
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	height: 100%;
	min-height: 100vh;
	background:
		linear-gradient(180deg, rgba(10,14,22,0.96), rgba(15,19,29,0.98)),
		radial-gradient(circle at top left, rgba(88,101,242,0.12), transparent 40%);
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	backdrop-filter: blur(12px);
	position: relative;
}

.chat-panel__shell::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.03), transparent 22%, transparent 78%, rgba(255,255,255,0.02)),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 120px);
	pointer-events: none;
	opacity: .45;
}

.chat-panel__sidebar{
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 22px 20px 20px;
	background:
		radial-gradient(circle at top, rgba(59,130,246,0.16), transparent 34%),
		linear-gradient(180deg, rgba(10,16,25,0.99), rgba(16,24,37,0.96));
	border-left: 1px solid rgba(255,255,255,0.06);
	position: relative;
}

.chat-panel__sidebar::after{
	content: "";
	position: absolute;
	top: 22px;
	left: 0;
	bottom: 22px;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(201,169,106,0.28), transparent);
}

.chat-panel__brand,
.chat-room-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.chat-panel__eyebrow,
.chat-room-head__eyebrow{
	margin: 0 0 6px;
	color: var(--accent);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.chat-panel__brand h3,
.chat-room-head h3{
	margin: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1.15;
}

.chat-panel__brand{
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.chat-panel__close,
.chat-room-icon,
.chat-composer__tool{
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	color: #dfe7f4;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.chat-panel__tabs{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 18px 0 18px;
}

.chat-panel__tabs{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
}

.chat-tab{
	position: relative;
	padding: 13px 10px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	color: var(--muted);
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .01em;
}

.chat-tab.is-active{
	background: linear-gradient(180deg, rgba(88,101,242,0.42), rgba(88,101,242,0.14));
	border-color: rgba(201,169,106,0.45);
	color: #fff;
	box-shadow: 0 10px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}

.chat-tab__badge{
	position: absolute;
	top: 5px;
	left: 7px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ff4757;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 6px 14px rgba(255,71,87,0.35);
}

.chat-thread-list{
	display: grid;
	gap: 12px;
}

.chat-thread-list.is-hidden{
	display: none;
}

.chat-panel__sidebar [data-chat-thread-list]{
	display: grid !important;
}

.chat-panel__sidebar [data-chat-thread-list].is-hidden{
	display: grid !important;
}

.chat-panel__sidebar [data-chat-thread-list="kingdom"]{
	order: 1;
	margin-top: 18px;
}

.chat-panel__sidebar [data-chat-thread-list="tribe"]{
	order: 2;
	margin-top: 10px;
}

.chat-panel__sidebar [data-chat-thread-list="private"]{
	order: 3;
	margin-top: 14px;
}

.chat-panel__sidebar [data-chat-thread-list="group"]{
	order: 4;
	margin-top: 12px;
}

.chat-panel__sidebar [data-chat-thread-list="tribe"] .chat-thread:not([data-chat-tribe-thread]){
	display: none;
}

.chat-sidebar-actions{
	order: 20;
	margin-top: auto;
	padding-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.chat-sidebar-action{
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
	color: #e9effa;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.chat-sidebar-action i{
	font-size: 14px;
}

.chat-sidebar-action:hover,
.chat-sidebar-action:focus-visible{
	transform: translateY(-1px);
	border-color: rgba(201,169,106,0.52);
	color: #fff9e6;
	box-shadow: 0 10px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

.chat-thread{
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 16px 15px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
		linear-gradient(180deg, rgba(19,27,39,0.92), rgba(12,19,29,0.92));
	color: #eef2f9;
	text-align: right;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.chat-thread::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(88,101,242,0.08), transparent 35%, transparent);
	opacity: .6;
	pointer-events: none;
}

.chat-thread.is-active{
	background:
		linear-gradient(135deg, rgba(59,130,246,0.28), rgba(201,169,106,0.13)),
		linear-gradient(180deg, rgba(23,34,50,0.98), rgba(17,26,39,0.96));
	border-color: rgba(201,169,106,0.42);
	transform: translateX(-4px);
}

.chat-thread.is-active::after{
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	right: 0;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, #eac178, #6b87ff);
}

.chat-thread__icon,
.chat-message__avatar{
	width: 48px;
	height: 48px;
	display: inline-grid;
	place-items: center;
	border-radius: 16px;
	font-weight: 700;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.chat-thread__icon.tribe,
.chat-message__avatar.tribe{
	background: linear-gradient(180deg, rgba(59,130,246,0.35), rgba(37,99,235,0.15));
	color: #bfdbfe;
}

.chat-thread__icon.kingdom,
.chat-message__avatar.kingdom{
	background: linear-gradient(180deg, rgba(234,179,8,0.32), rgba(161,98,7,0.18));
	color: #fef3c7;
}

.chat-thread__icon.private,
.chat-message__avatar.private{
	background: linear-gradient(180deg, rgba(16,185,129,0.32), rgba(5,150,105,0.14));
	color: #d1fae5;
}

.chat-thread__body{
	display: grid;
	gap: 4px;
	min-width: 0;
}

.chat-thread__body strong{
	color: #fff;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-thread__body small,
.chat-thread__meta{
	color: var(--muted);
	font-size: 12px;
}

.chat-thread__meta{
	align-self: start;
}

.chat-thread__meta.is-unread{
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(239,68,68,0.18);
	color: #fecaca;
}

.chat-private-thread-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34px;
	gap: 8px;
	align-items: center;
}

.chat-private-thread-row__delete{
	width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	border: 1px solid rgba(239,68,68,0.4);
	border-radius: 10px;
	background: rgba(239,68,68,0.14);
	color: #fecaca;
	cursor: pointer;
}

.chat-private-thread-row__delete:hover{
	background: rgba(239,68,68,0.24);
	border-color: rgba(239,68,68,0.62);
}

.chat-panel__content{
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	padding: 0;
	min-height: 0;
	background:
		linear-gradient(180deg, rgba(244,247,252,0.045), rgba(244,247,252,0.02)),
		linear-gradient(135deg, rgba(174,183,196,0.86), rgba(190,199,208,0.83));
	position: relative;
	overflow: hidden;
}

.chat-panel__content::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top right, rgba(88,101,242,0.12), transparent 22%),
		repeating-linear-gradient(0deg, rgba(33,43,58,0.018) 0 1px, transparent 1px 48px);
	pointer-events: none;
}

.chat-room-head__actions{
	display: flex;
	align-items: center;
	gap: 10px;
}

.chat-room-icon.is-hidden{
	display: none !important;
}

.chat-room-icon--label{
	width: auto;
	min-width: 42px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.chat-room-head{
	padding: 22px 24px 18px;
	background:
		linear-gradient(180deg, rgba(18,26,38,0.98), rgba(26,36,52,0.95)),
		radial-gradient(circle at top, rgba(88,101,242,0.18), transparent 45%);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	position: relative;
}

.chat-room-head::after{
	content: "";
	position: absolute;
	right: 24px;
	left: 24px;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201,169,106,0.35), transparent);
}

.chat-room-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	background: rgba(34,197,94,0.12);
	border: 1px solid rgba(34,197,94,0.28);
	color: #bbf7d0;
	font-size: 13px;
	font-weight: 700;
}

.chat-room-banner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 24px 0;
	padding: 18px 20px;
	border: 1px solid rgba(57,78,118,0.2);
	border-radius: 20px;
	background: linear-gradient(90deg, rgba(77,101,175,0.9), rgba(60,74,118,0.86));
	box-shadow: 0 16px 28px rgba(33,43,68,0.16);
}

.chat-room-banner strong,
.chat-message__meta strong{
	color: #fff;
}

.chat-room-banner p,
.chat-message p,
.chat-message__meta span{
	margin: 0;
	color: rgba(226,233,242,0.82);
}

.chat-room-banner span{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 999px;
	background: rgba(8,15,28,0.22);
	color: #f2f4fb;
	font-weight: 700;
}

.chat-messages{
	display: grid;
	align-content: start;
	gap: 16px;
	padding: 24px;
	min-height: 0;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #d5a33a rgba(15,22,34,0.68);
}

.chat-messages::-webkit-scrollbar,
.chat-profile-modal__dialog::-webkit-scrollbar{
	width: 10px;
	height: 10px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-profile-modal__dialog::-webkit-scrollbar-track{
	margin: 14px 0;
	background: rgba(6,11,19,0.46);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-profile-modal__dialog::-webkit-scrollbar-thumb{
	border: 2px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(180deg, #f0cc65, #9f6818) padding-box,
		radial-gradient(circle at 50% 18%, rgba(255,255,255,0.36), transparent 46%) border-box;
}

.chat-message{
	display: flex;
	justify-content: flex-start;
}

.chat-group-manage-modal{
	position: fixed;
	inset: 0;
	z-index: 1080;
}

.chat-group-manage-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.56);
}

.chat-group-manage-modal__dialog{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(620px, calc(100vw - 28px));
	max-height: min(78vh, 760px);
	overflow: auto;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(18,26,38,0.98), rgba(11,18,28,0.98));
	box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

.chat-group-manage-modal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.chat-group-manage-modal__head h3{
	margin: 0;
	color: #fff;
	font-size: 16px;
}

.chat-group-manage-modal__head p{
	margin: 3px 0 0;
	color: rgba(223,231,242,0.8);
	font-size: 12px;
}

.chat-group-manage-modal__close{
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 10px;
	background: rgba(255,255,255,0.04);
	color: #fff;
	cursor: pointer;
}

.chat-group-manage-modal__body{
	padding: 10px;
	display: grid;
	gap: 8px;
}

.chat-group-member-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	background: rgba(255,255,255,0.03);
}

.chat-group-member-row__left{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.chat-group-member-row__avatar{
	width: 38px;
	height: 38px;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,0.06);
	color: #fff;
	font-weight: 700;
}

.chat-group-member-row__avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chat-group-member-row__meta{
	display: grid;
	gap: 2px;
	min-width: 0;
}

.chat-group-member-row__meta strong{
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-group-member-row__meta small{
	color: rgba(223,231,242,0.75);
	font-size: 11px;
}

.chat-group-member-row__right{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.chat-group-member-row__remove{
	height: 30px;
	padding: 0 10px;
	border: 1px solid rgba(239,68,68,0.45);
	border-radius: 9px;
	background: rgba(239,68,68,0.16);
	color: #fecaca;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.chat-group-add-member{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	background: rgba(255,255,255,0.02);
}

.chat-group-add-member__select{
	flex: 1;
	min-width: 0;
	height: 34px;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	background: rgba(12,20,30,0.85);
	color: #e9effa;
	padding: 0 10px;
	font-size: 12px;
}

.chat-group-add-member__btn{
	height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(34,197,94,0.45);
	border-radius: 10px;
	background: rgba(34,197,94,0.14);
	color: #bbf7d0;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.chat-message--outgoing{
	justify-content: flex-end;
}

.chat-message__stack{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.chat-message--outgoing .chat-message__stack{
	align-items: flex-end;
}

.chat-message__row{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	position: relative;
}

.chat-message__row.has-avatar-frame{
	gap: 12px;
}

.chat-message--outgoing .chat-message__row{
	flex-direction: row-reverse;
}

.chat-message__nameplate{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-inline: 4px 8px;
	font-size: 12px;
	direction: rtl;
}

.chat-message__content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.chat-message--outgoing .chat-message__content{
	align-items: flex-end;
}

.chat-message--incoming.has-avatar-frame .chat-message__content{
	margin-left: 0 !important;
}

.chat-message--outgoing.has-avatar-frame .chat-message__content{
	margin-right: 0 !important;
}

.chat-rank-badge{
	width: 48px;
	height: 48px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 48px;
}

.chat-rank-badge.is-leader{
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22));
}

.chat-rank-badge.is-deputy{
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}

.chat-rank-badge.is-supervisor,
.chat-rank-badge.is-steward,
.chat-rank-badge.is-aide,
.chat-rank-badge.is-follower{
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 999px;
	font-size: 13px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

.chat-rank-badge.is-supervisor{
	background: linear-gradient(180deg, #6aa8ff, #2d5fae);
	color: #eff7ff;
}

.chat-rank-badge.is-steward{
	background: linear-gradient(180deg, #8b7bf5, #5942bf);
	color: #f5f0ff;
}

.chat-rank-badge.is-aide{
	background: linear-gradient(180deg, #f0a84f, #c97a14);
	color: #fff8ec;
}

.chat-rank-badge.is-follower{
	background: linear-gradient(180deg, #8ea1b7, #5f7084);
	color: #f2f6fb;
}

.chat-rank-badge img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.chat-message--incoming .chat-message__nameplate{
	direction: ltr;
}

.chat-message--outgoing .chat-message__nameplate{
	padding-inline: 8px 4px;
}

.chat-message__nameplate strong{
	color: #12171f;
	font-size: 26px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: .01em;
}

.chat-message__nameplate.is-leader strong{
	color: #6f4700;
}

.chat-message__nameplate.is-deputy strong{
	color: #325f91;
}

.chat-message__nameplate.is-supervisor strong{
	color: #2b5b9a;
}

.chat-message__nameplate.is-steward strong{
	color: #5a44ab;
}

.chat-message__nameplate.is-aide strong{
	color: #9a5d12;
}

.chat-message__nameplate.is-follower strong{
	color: #46566a;
}

.chat-message__nameplate span{
	color: rgba(27,33,43,0.55);
	font-weight: 700;
}

.chat-nobility-badge{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	padding: 0 11px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.28);
	color: #fff;
	font-size: 11px;
	font-weight: 950;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
	overflow: hidden;
}

.chat-nobility-badge:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,0.36) 48%, transparent 62% 100%);
	transform: translateX(-120%);
	animation: nobilityShine 3.8s ease-in-out infinite;
}

.chat-nobility-badge.is-knight{
	background: linear-gradient(180deg, #aeb8c8, #526174);
}

.chat-nobility-badge.is-baron{
	background: linear-gradient(180deg, #d19145, #743f11);
	color: #fff1c2;
}

.chat-nobility-badge.is-earl{
	background: linear-gradient(180deg, #e0bf55, #8b6012);
	color: #fff8d5;
}

.chat-nobility-badge.is-duke{
	background: linear-gradient(180deg, #65d8ff, #1d6399);
	border-color: rgba(168,231,255,0.8);
}

.chat-nobility-badge.is-prince{
	background: linear-gradient(180deg, #c89cff, #6730c8);
	border-color: rgba(226,202,255,0.84);
	color: #fff7ff;
}

.chat-nobility-badge.is-king{
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,0.42), transparent 44%),
		linear-gradient(180deg, #ffe479, #bf7c0c);
	border-color: rgba(255,232,137,0.96);
	color: #3a2100;
	text-shadow: 0 1px rgba(255,255,255,0.35);
	box-shadow: 0 0 0 1px rgba(255,223,93,0.34), 0 10px 24px rgba(174,110,16,0.34), inset 0 1px 0 rgba(255,255,255,0.34);
}

@keyframes nobilityShine{
	0%, 62%{
		transform: translateX(-120%);
	}
	78%, 100%{
		transform: translateX(120%);
	}
}

.chat-message__bubble{
	max-width: min(78%, 460px);
	padding: 14px 20px;
	border-radius: 14px 4px 14px 14px;
	border: 1px solid rgba(52,67,96,0.16);
	background: linear-gradient(180deg, rgba(80,94,122,0.96), rgba(68,82,109,0.92));
	box-shadow: 0 16px 28px rgba(38,47,64,0.12);
	position: relative;
}

.chat-message__bubble::after{
	content: "";
	position: absolute;
	top: -1px;
	left: -14px;
	width: 0;
	height: 0;
	border-top: 14px solid rgba(80,94,122,0.96);
	border-right: 14px solid transparent;
}

.chat-message--incoming .chat-message__bubble{
	background: linear-gradient(180deg, rgba(89,101,124,0.92), rgba(100,112,135,0.88));
	margin-left: 0;
}

.chat-message--incoming.has-avatar-frame .chat-message__bubble:not(.chat-message__bubble--skin)::after{
	left: -10px;
}

.chat-message--outgoing .chat-message__bubble{
	background: linear-gradient(180deg, rgba(86,111,193,0.94), rgba(75,96,170,0.88));
	border-radius: 4px 14px 14px 14px;
	margin-right: 0;
}

.chat-message__bubble.chat-message__bubble--skin-001,
.chat-message__bubble.chat-message__bubble--skin-002,
.chat-message__bubble.chat-message__bubble--skin-003,
.chat-message__bubble.chat-message__bubble--skin-004,
.chat-message__bubble.chat-message__bubble--skin-005,
.chat-message__bubble.chat-message__bubble--skin-006,
.chat-message__bubble.chat-message__bubble--skin-007,
.chat-message__bubble.chat-message__bubble--skin-008,
.chat-message__bubble.chat-message__bubble--skin-009,
.chat-message__bubble.chat-message__bubble--skin-010,
.chat-message__bubble.chat-message__bubble--skin-012{
	margin-left: 0;
	margin-right: 0;
}

.chat-message--outgoing .chat-message__bubble::after{
	left: auto;
	right: -14px;
	border-top-color: rgba(86,111,193,0.94);
	border-right: 0;
	border-left: 14px solid transparent;
}

.chat-message__bubble.chat-message__bubble--skin{
	border: 0;
	border-radius: 0;
	width: max-content;
	min-width: 300px;
	max-width: min(560px, 72vw);
	height: auto;
	min-height: 72px;
	padding: 16px 52px;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.chat-message__bubble.chat-message__bubble--skin-001{
	background: none !important;
	padding: 0;
	min-width: 0;
	max-width: min(720px, 78vw);
	display: grid;
	grid-template-columns: 120px minmax(120px, 1fr) 120px;
	align-items: stretch;
	overflow: visible;
	direction: ltr;
	transform: translateX(0);
}

.chat-skin-001__left{
	background: url('/images/chat-skins/001/skin_001_left_240x400.png?v=2') no-repeat left center;
	background-size: 100% 340%;
	min-height: 152px;
}

.chat-skin-001__mid{
	background: url('/images/chat-skins/001/skin_001_mid_40x400.png?v=2') repeat-x center;
	background-size: auto 340%;
	min-height: 152px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 10px;
}

.chat-skin-001__right{
	background: url('/images/chat-skins/001/skin_001_right_240x400.png?v=2') no-repeat right center;
	background-size: 100% 340%;
	min-height: 152px;
}

.chat-message__bubble.chat-message__bubble--skin::after{
	display: none;
}

.chat-message__bubble.chat-message__bubble--skin p{
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	line-height: 1.25;
	font-size: 30px;
	margin: 0;
	max-width: 100%;
	max-height: 2.5em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.chat-message__bubble.chat-message__bubble--skin-001 p{
	font-size: 16px;
	line-height: 1.2;
	max-height: 2.4em;
	margin: 0;
	direction: rtl;
	unicode-bidi: plaintext;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
	transform: translateY(-10px);
}

.chat-message__bubble.chat-message__bubble--skin-002{
	background: none !important;
	padding: 0;
	min-width: 0;
	max-width: min(760px, 82vw);
	display: grid;
	grid-template-columns: 120px minmax(120px, 1fr) 120px;
	align-items: stretch;
	overflow: visible;
	direction: ltr;
	position: relative;
	transform: translate(-10px, -8px);
}

.chat-skin-002__left{
	background: url('/images/chat-skins/002/skin_002_left_240x400.png?v=2') no-repeat left center;
	background-size: 100% 330%;
	min-height: 218px;
	position: relative;
	z-index: 1;
}

.chat-skin-002__mid{
	background: url('/images/chat-skins/002/skin_002_mid_40x400.png?v=2') repeat-x center;
	background-size: auto 330%;
	min-height: 218px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 28px 12px 38px;
	position: relative;
	z-index: 3;
}

.chat-skin-002__right{
	background: url('/images/chat-skins/002/skin_002_right_240x400.png?v=2') no-repeat right center;
	background-size: 100% 330%;
	min-height: 218px;
	position: relative;
	z-index: 1;
}

.chat-skin-002__overlay{
	position: absolute;
	left: 50%;
	top: -46px;
	transform: translateX(-50%);
	width: 260px;
	height: 200px;
	background: url('/images/chat-skins/002/skin_002_overlay_520x400.png') no-repeat center;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
}

.chat-message__bubble.chat-message__bubble--skin-002 p{
	font-size: 14px;
	line-height: 1.3;
	max-height: 2.5em;
	margin: 0;
	width: 86%;
	max-width: 86%;
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
	transform: translateY(-10px);
	z-index: 4;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.chat-message__bubble.chat-message__bubble--skin-002 p.is-two-lines{
	transform: translateY(-4px);
}

.chat-message__bubble.chat-message__bubble--skin-003{
	background: none !important;
	padding: 0;
	min-width: 260px;
	max-width: min(650px, 78vw);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	direction: ltr;
	position: relative;
	transform: translate(0, 0);
}

.chat-skin-003__left,
.chat-skin-003__right{
	flex: 0 0 96px;
	width: 96px;
	min-height: 146px;
	background-repeat: no-repeat;
	background-size: 96px 220px;
	position: relative;
	z-index: 2;
}

.chat-skin-003__left{
	background-image: url('/images/chat-skins/003/skin_003_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-003__right{
	background-image: url('/images/chat-skins/003/skin_003_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-003__mid{
	background: url('/images/chat-skins/003/skin_003_mid.png?v=2') repeat-x center;
	background-size: 16px 220px;
	min-height: 146px;
	flex: 1 1 auto;
	min-width: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	position: relative;
	z-index: 3;
}

.chat-message__bubble.chat-message__bubble--skin-003 p{
	font-size: 14px;
	line-height: 1.22;
	max-height: 2.32em;
	margin: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
	transform: translateY(-18px);
	z-index: 4;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.chat-message__bubble.chat-message__bubble--skin-003 p.is-two-lines{
	transform: translateY(-18px);
}

.chat-message__bubble.chat-message__bubble--skin-004{
	background: none !important;
	padding: 0;
	min-width: 260px;
	max-width: min(650px, 78vw);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	direction: ltr;
	position: relative;
	transform: translate(0, 0);
}

.chat-skin-004__left,
.chat-skin-004__right{
	flex: 0 0 96px;
	width: 96px;
	min-height: 146px;
	background-repeat: no-repeat;
	background-size: 96px 220px;
	position: relative;
	z-index: 2;
}

.chat-skin-004__left{
	background-image: url('/images/chat-skins/004/skin_004_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-004__right{
	background-image: url('/images/chat-skins/004/skin_004_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-004__mid{
	background: url('/images/chat-skins/004/skin_004_mid.png?v=2') repeat-x center;
	background-size: 16px 220px;
	min-height: 146px;
	flex: 1 1 auto;
	min-width: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	position: relative;
	z-index: 3;
}

.chat-message__bubble.chat-message__bubble--skin-004 p{
	font-size: 14px;
	line-height: 1.22;
	max-height: 2.32em;
	margin: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
	transform: translateY(-10px);
	z-index: 4;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.chat-message__bubble.chat-message__bubble--skin-004 p.is-two-lines{
	transform: translateY(-10px);
}

.chat-message__bubble.chat-message__bubble--skin-005{
	background: none !important;
	padding: 0;
	min-width: 260px;
	max-width: min(650px, 78vw);
	margin-bottom: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	direction: ltr;
	position: relative;
	transform: translate(0, 0);
}

.chat-skin-005__left,
.chat-skin-005__right{
	flex: 0 0 112px;
	width: 112px;
	min-height: 238px;
	background-repeat: no-repeat;
	background-size: 112px 300px;
	position: relative;
	z-index: 2;
}

.chat-skin-005__left{
	background-image: url('/images/chat-skins/005/skin_008_left.png?v=8');
	background-position: left center;
	margin-right: -34px;
}

.chat-skin-005__right{
	background-image: url('/images/chat-skins/005/skin_008_right.png?v=8');
	background-position: right center;
	margin-left: -34px;
}

.chat-skin-005__mid{
	background: url('/images/chat-skins/005/skin_008_mid.png?v=8') repeat-x center;
	background-size: 18px 300px;
	min-height: 238px;
	flex: 1 1 auto;
	min-width: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	position: relative;
	z-index: 3;
}

.chat-skin-005__bottom-overlay{
	position: absolute;
	left: 50%;
	width: 260px;
	height: 80px;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 260px 80px;
	pointer-events: none;
	z-index: 4;
}

.chat-skin-005__bottom-overlay{
	bottom: -46px;
	background-image: url('/images/chat-skins/005/skin_008_bottom_overlay.png?v=8');
}

.chat-message__bubble.chat-message__bubble--skin-005 p{
	font-size: 15px;
	line-height: 1.3;
	min-height: 2.6em;
	max-height: 2.6em;
	margin: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	transform: translateY(-28px);
	z-index: 5;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
	white-space: normal;
	word-break: break-word;
}

.chat-message__bubble.chat-message__bubble--skin-005 p.is-two-lines{
	transform: translateY(-28px);
}

.chat-message__bubble.chat-message__bubble--skin-006,
.chat-message__bubble.chat-message__bubble--skin-007,
.chat-message__bubble.chat-message__bubble--skin-008,
.chat-message__bubble.chat-message__bubble--skin-009,
.chat-message__bubble.chat-message__bubble--skin-010,
.chat-message__bubble.chat-message__bubble--skin-012{
	background: none !important;
	padding: 0;
	min-width: 260px;
	max-width: min(650px, 78vw);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	direction: ltr;
	position: relative;
	transform: translate(0, 0);
}

.chat-skin-006__left,
.chat-skin-006__right,
.chat-skin-007__left,
.chat-skin-007__right,
.chat-skin-008__left,
.chat-skin-008__right,
.chat-skin-009__left,
.chat-skin-009__right,
.chat-skin-010__left,
.chat-skin-010__right,
.chat-skin-012__left,
.chat-skin-012__right{
	flex: 0 0 96px;
	width: 96px;
	min-height: 146px;
	background-repeat: no-repeat;
	background-size: 96px 220px;
	position: relative;
	z-index: 2;
}

.chat-skin-006__mid,
.chat-skin-007__mid,
.chat-skin-008__mid,
.chat-skin-009__mid,
.chat-skin-010__mid,
.chat-skin-012__mid{
	background-repeat: repeat-x;
	background-position: center;
	background-size: 16px 220px;
	min-height: 146px;
	flex: 1 1 auto;
	min-width: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	position: relative;
	z-index: 3;
}

.chat-skin-006__left{
	background-image: url('/images/chat-skins/006/banner_01_purple_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-006__mid{
	background-image: url('/images/chat-skins/006/banner_01_purple_mid.png?v=2');
}

.chat-skin-006__right{
	background-image: url('/images/chat-skins/006/banner_01_purple_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-007__left{
	background-image: url('/images/chat-skins/007/banner_02_red_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-007__mid{
	background-image: url('/images/chat-skins/007/banner_02_red_mid.png?v=2');
}

.chat-skin-007__right{
	background-image: url('/images/chat-skins/007/banner_02_red_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-008__left{
	background-image: url('/images/chat-skins/008/banner_03_green_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-008__mid{
	background-image: url('/images/chat-skins/008/banner_03_green_mid.png?v=2');
}

.chat-skin-008__right{
	background-image: url('/images/chat-skins/008/banner_03_green_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-009__left{
	background-image: url('/images/chat-skins/009/banner_04_magenta_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-009__mid{
	background-image: url('/images/chat-skins/009/banner_04_magenta_mid.png?v=2');
}

.chat-skin-009__right{
	background-image: url('/images/chat-skins/009/banner_04_magenta_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-010__left{
	background-image: url('/images/chat-skins/0010/banner_05_yellow_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-010__mid{
	background-image: url('/images/chat-skins/0010/banner_05_yellow_mid.png?v=2');
}

.chat-skin-010__right{
	background-image: url('/images/chat-skins/0010/banner_05_yellow_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-skin-012__left{
	background-image: url('/images/chat-skins/0012/banner_07_blue_left.png?v=2');
	background-position: left center;
	margin-right: -1px;
}

.chat-skin-012__mid{
	background-image: url('/images/chat-skins/0012/banner_07_blue_mid.png?v=2');
}

.chat-skin-012__right{
	background-image: url('/images/chat-skins/0012/banner_07_blue_right.png?v=2');
	background-position: right center;
	margin-left: -1px;
}

.chat-message__bubble.chat-message__bubble--skin-006 p,
.chat-message__bubble.chat-message__bubble--skin-007 p,
.chat-message__bubble.chat-message__bubble--skin-008 p,
.chat-message__bubble.chat-message__bubble--skin-009 p,
.chat-message__bubble.chat-message__bubble--skin-010 p,
.chat-message__bubble.chat-message__bubble--skin-012 p{
	font-size: 14px;
	line-height: 1.22;
	max-height: 2.32em;
	margin: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
	transform: translateY(-16px);
	z-index: 4;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.chat-message__bubble.chat-message__bubble--skin-006 p.is-two-lines,
.chat-message__bubble.chat-message__bubble--skin-007 p.is-two-lines,
.chat-message__bubble.chat-message__bubble--skin-008 p.is-two-lines,
.chat-message__bubble.chat-message__bubble--skin-009 p.is-two-lines,
.chat-message__bubble.chat-message__bubble--skin-010 p.is-two-lines,
.chat-message__bubble.chat-message__bubble--skin-012 p.is-two-lines{
	transform: translateY(-16px);
}

.chat-message--system{
	justify-content: center;
}

.chat-message--system .chat-message__bubble{
	background: linear-gradient(180deg, rgba(117,124,153,0.78), rgba(105,113,145,0.72));
	border-color: rgba(79,89,115,0.22);
}

.chat-message p{
	color: #f8f9fb;
	line-height: 1.5;
	font-size: 18px;
	font-weight: 700;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}

.chat-mention{
	color: #4ea4ff;
	font-weight: 800;
	background: rgba(78,164,255,0.14);
	border: 1px solid rgba(78,164,255,0.35);
	padding: 1px 6px;
	border-radius: 999px;
}

.chat-message__avatar{
	width: 78px;
	height: 78px;
	padding: 5px;
	appearance: none;
	cursor: pointer;
	border-radius: 999px;
	position: relative;
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0) 34%),
		linear-gradient(180deg, #f8df98, #b87417 48%, #f7d172 100%);
	border: 3px solid rgba(143,83,14,0.8);
	box-shadow:
		0 10px 25px rgba(0,0,0,0.2),
		inset 0 2px 3px rgba(255,255,255,0.42);
	overflow: visible;
}

.chat-message__avatar.avatar-frame::after{
	content: "";
	position: absolute;
	inset: -20px;
	background: var(--avatar-frame-image) center/contain no-repeat;
	transform: translateY(var(--avatar-frame-y, 0px));
	pointer-events: none;
	z-index: 3;
}

.chat-message__avatar.avatar-frame{
	box-sizing: border-box;
	width: 78px;
	height: 78px;
	padding: var(--avatar-face-padding, 13px);
	border: 0;
	background: transparent;
	box-shadow: none;
}

.chat-message__avatar.avatar-frame img,
.chat-message__avatar.avatar-frame span{
	transform: translateY(var(--avatar-face-y, 0px)) scale(var(--avatar-face-scale, 1));
	transform-origin: center;
}

/* Frame 002 has a wider inner ring, so use tighter padding to fill it. */
.chat-message__avatar.avatar-frame.avatar-frame-code-002{
	padding: 5px;
	transform: translateY(1px);
}

.chat-message__avatar.avatar-frame.avatar-frame-code-002 img,
.chat-message__avatar.avatar-frame.avatar-frame-code-002 span{
	transform: translateY(-2px) scale(1.05);
	transform-origin: center;
}

/* Frame 010 needs a slightly larger face fit and a small upward nudge. */
.chat-message__avatar.avatar-frame.avatar-frame-code-010{
	padding: 4px;
}

.chat-message__avatar.avatar-frame.avatar-frame-code-010 img,
.chat-message__avatar.avatar-frame.avatar-frame-code-010 span{
	transform: translateY(-3px) scale(1.1);
	transform-origin: center;
}

/* Frame 012 needs a tighter fit around the circular inner ring. */
.chat-message__avatar.avatar-frame.avatar-frame-code-012{
	padding: 4px;
}

.chat-message__avatar.avatar-frame.avatar-frame-code-012 img,
.chat-message__avatar.avatar-frame.avatar-frame-code-012 span{
	transform: translateY(-2px) scale(1.09);
	transform-origin: center;
}

.chat-message__avatar:hover{
	transform: translateY(-2px) scale(1.02);
	box-shadow:
		0 14px 28px rgba(0,0,0,0.24),
		inset 0 2px 3px rgba(255,255,255,0.42);
}

.chat-message__player-actions{
	display: grid;
	align-items: center;
	gap: 8px;
}

.chat-message__player-actions.has-avatar-frame{
	box-sizing: border-box;
	position: relative;
	z-index: 7;
	margin-top: -14px;
	width: 118px;
	min-width: 118px;
	height: 118px;
	flex: 0 0 118px;
	justify-items: center;
	align-items: start;
	padding-top: 8px;
}

.chat-message__inspect{
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(32,51,87,0.94), rgba(19,32,57,0.98));
	color: #eaf1ff;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(10,18,32,0.2);
}

.chat-player-modal{
	position: fixed;
	inset: 0;
	z-index: 200100 !important;
	display: grid;
	place-items: center;
}

.chat-player-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(6,10,16,0.62);
	backdrop-filter: blur(6px);
}

.chat-player-modal__dialog{
	position: relative;
	z-index: 1;
	width: min(760px, calc(100vw - 32px));
	padding: 20px;
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(35,44,58,0.98), rgba(20,27,39,0.98)),
		radial-gradient(circle at top, rgba(92,123,196,0.18), transparent 48%);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.chat-player-modal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.chat-player-modal__head h3{
	margin: 0;
	color: #eef3fb;
	font-size: 34px;
	font-weight: 800;
}

.chat-player-modal__close{
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
	color: #dfe6f4;
	cursor: pointer;
}

.chat-player-card{
	display: grid;
	gap: 18px;
}

.chat-player-card__hero{
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border-radius: 24px;
	background:
		linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
		radial-gradient(circle at left, rgba(184,76,59,0.22), transparent 28%);
	border: 1px solid rgba(255,255,255,0.08);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.chat-player-card__hero:hover,
.chat-player-card__hero:focus-visible{
	border-color: rgba(255,214,90,0.38);
	background:
		linear-gradient(90deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)),
		radial-gradient(circle at left, rgba(184,76,59,0.28), transparent 30%);
}

.chat-player-card__hero:focus-visible{
	outline: 2px solid rgba(255,214,90,0.7);
	outline-offset: 3px;
}

.chat-player-card__avatar{
	position: relative;
	width: 110px;
	height: 110px;
	padding: 7px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f8df98, #b87417 48%, #f7d172 100%);
	border: 3px solid rgba(143,83,14,0.82);
	box-shadow: 0 14px 30px rgba(0,0,0,0.24);
	overflow: visible;
}

.chat-player-card__avatar.is-guild-leader{
	box-shadow: 0 0 0 2px rgba(255,224,90,0.28), 0 18px 38px rgba(194,125,18,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}

.chat-player-card__crown{
	position: absolute;
	z-index: 3;
	top: -8px;
	left: 50%;
	width: 38px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%) rotate(-6deg);
	border-radius: 999px;
	pointer-events: none;
	filter: drop-shadow(0 7px 8px rgba(0,0,0,0.34));
}

.chat-player-card__crown i{
	font-size: 25px;
}

.chat-player-card__crown.is-guild-leader{
	color: #ffd84d;
	text-shadow: 0 1px 0 #5a3300, 0 0 14px rgba(255,214,73,0.72);
}

.chat-player-card__avatar img,
.chat-player-card__avatar span{
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	border-radius: 999px;
	object-fit: cover;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	overflow: hidden;
}

.chat-player-card__meta{
	display: grid;
	gap: 6px;
	min-width: 0;
}

.chat-player-card__meta strong{
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	word-break: break-word;
}

.chat-player-card__meta span{
	color: #c8d5ea;
	font-size: 16px;
	font-weight: 700;
}

.chat-player-card__rank-line{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.chat-player-card__profile-arrow{
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	filter: drop-shadow(0 5px 8px rgba(0,0,0,0.24));
	transition: transform .18s ease;
}

.chat-player-card__hero:hover .chat-player-card__profile-arrow,
.chat-player-card__hero:focus-visible .chat-player-card__profile-arrow{
	transform: translateX(-2px);
}

.chat-player-card__profile-arrow img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.chat-player-card__rank-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.chat-player-card__rank-badge:empty{
	display: none;
}

.chat-player-card__rank-badge .chat-rank-badge{
	width: 34px;
	height: 34px;
	flex-basis: 34px;
}

.chat-player-card__rank-badge .chat-rank-badge.is-supervisor,
.chat-player-card__rank-badge .chat-rank-badge.is-steward,
.chat-player-card__rank-badge .chat-rank-badge.is-aide,
.chat-player-card__rank-badge .chat-rank-badge.is-follower{
	width: 24px;
	height: 24px;
	flex-basis: 24px;
	font-size: 11px;
}

.chat-player-card__nobility{
	width: max-content;
	max-width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	padding: 6px 11px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(69,82,102,0.94), rgba(35,46,63,0.96));
	border: 1px solid rgba(255,255,255,0.14);
	color: #e8effb !important;
	font-size: 12px !important;
	font-weight: 950 !important;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}

.chat-player-card__nobility.is-knight{
	background: linear-gradient(180deg, #aeb8c8, #526174);
}

.chat-player-card__nobility.is-baron{
	background: linear-gradient(180deg, #d19145, #743f11);
	color: #fff1c2 !important;
}

.chat-player-card__nobility.is-earl{
	background: linear-gradient(180deg, #e0bf55, #8b6012);
	color: #fff8d5 !important;
}

.chat-player-card__nobility.is-duke{
	background: linear-gradient(180deg, #65d8ff, #1d6399);
	border-color: rgba(168,231,255,0.8);
}

.chat-player-card__nobility.is-prince{
	background: linear-gradient(180deg, #c89cff, #6730c8);
	border-color: rgba(226,202,255,0.84);
	color: #fff7ff !important;
}

.chat-player-card__nobility.is-king{
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,0.42), transparent 44%),
		linear-gradient(180deg, #ffe479, #bf7c0c);
	border-color: rgba(255,232,137,0.96);
	color: #3a2100 !important;
	text-shadow: 0 1px rgba(255,255,255,0.35);
}

.chat-player-card__badge{
	padding: 10px 16px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(62,88,156,0.98), rgba(44,66,122,0.96));
	color: #eaf1ff;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

.chat-player-card__list{
	display: grid;
	gap: 12px;
}

.chat-player-card__option{
	padding: 18px 20px;
	border: 0;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(235,240,248,0.93), rgba(214,222,234,0.88));
	color: #162233;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	text-align: right;
	cursor: pointer;
}

.chat-player-card__option span{
	font-size: 28px;
	font-weight: 800;
}

.chat-player-card__option small{
	color: #516073;
	font-size: 14px;
	font-weight: 700;
}

.chat-player-card__actions{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.chat-player-card__action{
	height: 58px;
	border: 0;
	border-radius: 20px;
	background: linear-gradient(180deg, #2d8bd9, #1868af);
	color: #f4fbff;
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 16px 30px rgba(23,100,167,0.26);
}

.chat-player-card__action.is-secondary{
	background: linear-gradient(180deg, #1e3558, #13243d);
	box-shadow: 0 16px 30px rgba(12,20,34,0.28);
}

.chat-player-card__action.is-pending{
	background: linear-gradient(180deg, #6a7689, #435066);
	box-shadow: 0 12px 22px rgba(27,35,50,0.24);
}

.chat-player-card__action.is-done{
	background: linear-gradient(180deg, #38a76d, #1f7a4d);
	box-shadow: 0 12px 22px rgba(18,95,57,0.26);
}

.chat-player-card__action.is-failed{
	background: linear-gradient(180deg, #be5454, #8d2f2f);
	box-shadow: 0 12px 22px rgba(110,31,31,0.26);
}

.chat-profile-modal{
	position: fixed;
	inset: 0;
	z-index: 200110 !important;
	display: grid;
	place-items: center;
}

.chat-profile-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(6,10,16,0.72);
	backdrop-filter: blur(8px);
}

.chat-profile-modal__dialog{
	position: relative;
	z-index: 1;
	width: min(1180px, calc(100vw - 32px));
	max-height: min(92vh, 980px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d5a33a rgba(15,22,34,0.68);
	padding: 22px;
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(34,43,58,0.98), rgba(20,27,39,0.98)),
		radial-gradient(circle at right top, rgba(196,71,54,0.18), transparent 32%);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 32px 84px rgba(0,0,0,0.36);
}

.chat-profile-modal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.chat-profile-modal__head h3{
	margin: 0;
	color: #f3f6fc;
	font-size: 32px;
	font-weight: 800;
}

.chat-profile-modal__close{
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
	color: #dfe6f4;
	cursor: pointer;
}

.chat-profile-card{
	display: grid;
	gap: 18px;
}

.chat-profile-card__hero{
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 18px 20px;
	border-radius: 24px;
	background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
	border: 1px solid rgba(255,255,255,0.08);
}

.chat-profile-card__avatar{
	width: 110px;
	height: 110px;
	padding: 7px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f8df98, #b87417 48%, #f7d172 100%);
	border: 3px solid rgba(143,83,14,0.82);
	box-shadow: 0 14px 30px rgba(0,0,0,0.24);
	overflow: hidden;
}

.chat-profile-card__avatar img,
.chat-profile-card__avatar span{
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: grid;
	place-items: center;
	object-fit: cover;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 32px;
	font-weight: 800;
}

.chat-profile-card__meta strong{
	display: block;
	color: #fff;
	font-size: 28px;
	line-height: 1.2;
}

.chat-profile-card__meta span{
	display: block;
	margin-top: 8px;
	color: #c8d5ea;
	font-size: 16px;
	font-weight: 700;
}

.chat-profile-card__nobility,
.chat-loadout__nobility{
	width: max-content;
	max-width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(75,86,104,0.9), rgba(36,45,60,0.92));
	border: 1px solid rgba(255,255,255,0.16);
	color: #eaf0fb !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 1;
	box-shadow: 0 8px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}

.chat-profile-card__nobility.is-knight,
.chat-loadout__nobility.is-knight{
	background: linear-gradient(180deg, #9ca3af, #4b5563);
}

.chat-profile-card__nobility.is-baron,
.chat-loadout__nobility.is-baron{
	background: linear-gradient(180deg, #c0843d, #74410f);
	color: #fff1c7 !important;
}

.chat-profile-card__nobility.is-earl,
.chat-loadout__nobility.is-earl{
	background: linear-gradient(180deg, #d8b44c, #895f12);
	color: #fff7d4 !important;
}

.chat-profile-card__nobility.is-duke,
.chat-loadout__nobility.is-duke{
	background: linear-gradient(180deg, #61d3ff, #1c5f95);
	border-color: rgba(160,224,255,0.65);
}

.chat-profile-card__nobility.is-prince,
.chat-loadout__nobility.is-prince{
	background: linear-gradient(180deg, #b887ff, #5c2cc1);
	border-color: rgba(220,192,255,0.72);
	color: #fff5ff !important;
}

.chat-profile-card__nobility.is-king,
.chat-loadout__nobility.is-king{
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,0.34), transparent 42%),
		linear-gradient(180deg, #ffe17a, #b77912);
	border-color: rgba(255,230,129,0.9);
	color: #321b00 !important;
	text-shadow: 0 1px rgba(255,255,255,0.28);
}

.chat-profile-card__stats{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.chat-profile-card__stat,
.chat-profile-card__line{
	padding: 16px 18px;
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(235,240,248,0.93), rgba(214,222,234,0.88));
	color: #172335;
}

.chat-profile-card__stat span,
.chat-profile-card__line span{
	display: block;
	font-size: 13px;
	color: #4f6073;
	font-weight: 700;
	margin-bottom: 6px;
}

.chat-profile-card__stat strong,
.chat-profile-card__line strong{
	font-size: 22px;
	font-weight: 800;
}

.chat-profile-card__group{
	display: grid;
	gap: 12px;
}

.chat-profile-card__equipment-block{
	display: grid;
	gap: 14px;
}

.chat-profile-card__section-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.chat-profile-card__section-head strong{
	color: #f3f6fc;
	font-size: 22px;
	font-weight: 800;
}

.chat-profile-card__section-head span{
	color: #c3cde0;
	font-size: 14px;
	font-weight: 700;
}

.chat-profile-card__equipment{
	display: block;
}

.chat-equip-slot{
	position: relative;
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(233,239,248,0.97), rgba(217,226,239,0.9));
	border: 1px solid rgba(255,255,255,0.35);
	box-shadow: 0 18px 30px rgba(7,12,20,0.14);
	min-height: 184px;
}

.chat-equip-slot.is-empty{
	background: linear-gradient(180deg, rgba(68,78,96,0.4), rgba(38,47,61,0.36));
	border-color: rgba(255,255,255,0.08);
	box-shadow: none;
}

.chat-equip-slot__slot-label{
	color: #53657b;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.chat-equip-slot.is-empty .chat-equip-slot__slot-label{
	color: #aeb8c7;
}

.chat-equip-slot__icon{
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), rgba(187,198,217,0.9));
	border: 1px solid rgba(77,97,126,0.16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.66);
}

.chat-equip-slot.is-empty .chat-equip-slot__icon{
	background: linear-gradient(180deg, rgba(26,35,49,0.82), rgba(15,22,33,0.94));
	border-color: rgba(255,255,255,0.08);
}

.chat-equip-slot__icon img,
.chat-equip-slot__icon span{
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 800;
	color: #1c2a3f;
}

.chat-equip-slot.is-empty .chat-equip-slot__icon span{
	color: #c5d0e0;
}

.chat-equip-slot__plus{
	position: absolute;
	left: -6px;
	bottom: -8px;
	min-width: 34px;
	height: 28px;
	padding: 0 9px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #2e85d9, #154f9a);
	color: #eef6ff;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 10px 18px rgba(13,73,145,0.34);
}

.chat-equip-slot__name{
	color: #162233;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
	word-break: break-word;
}

.chat-equip-slot.is-empty .chat-equip-slot__name{
	color: #eef2f9;
}

.chat-equip-slot__meta{
	color: #58697d;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.chat-equip-slot.is-empty .chat-equip-slot__meta{
	color: #b2becd;
}

.chat-equip-slot__stats{
	display: grid;
	gap: 6px;
	margin-top: 2px;
}

.chat-equip-slot__stat{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 12px;
	background: rgba(255,255,255,0.48);
	color: #1b2a40;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
}

.chat-equip-slot__stat b{
	color: #5a6c83;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.chat-equip-slot__stat em{
	color: #1d7d45;
	font-style: normal;
	font-weight: 900;
}

.chat-loadout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 18px;
	align-items: stretch;
}

.chat-loadout__board{
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: 86px 86px minmax(160px, 1fr) 86px 86px;
	grid-template-rows: 44px repeat(4, 92px);
	grid-template-areas:
		"power power power power power"
		"head neck character rightWeapon armor"
		"ring leftWeapon character garment steed"
		"boots bottle character tower mount"
		". fan character . .";
	gap: 12px;
	padding: 18px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 50% 38%, rgba(250,216,132,0.18), transparent 34%),
		linear-gradient(135deg, rgba(57,32,32,0.98), rgba(36,23,30,0.98));
	border: 1px solid rgba(234,190,83,0.42);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 22px 42px rgba(0,0,0,0.26);
	overflow: visible;
}

.chat-loadout__board:before{
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(233,198,86,0.18);
	border-radius: 18px;
	pointer-events: none;
}

.chat-loadout__power{
	position: relative;
	z-index: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 18px 0 8px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(77,20,18,0.96), rgba(36,13,12,0.96)),
		linear-gradient(90deg, #f8e18a, #a96718);
	border: 1px solid rgba(255,219,107,0.76);
	box-shadow: 0 10px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
	color: #fff3c0;
	font-family: Georgia, "Times New Roman", serif;
}

.chat-loadout__power span{
	min-width: 42px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 20%, #7a5cff, #192783 72%);
	border: 1px solid rgba(255,255,255,0.42);
	color: #fff;
	font-size: 19px;
	font-weight: 900;
	text-shadow: 0 1px 3px rgba(0,0,0,0.72);
}

.chat-loadout__power b{
	color: #ffd85e;
	font-size: 18px;
	font-style: italic;
	font-weight: 900;
	text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}

.chat-loadout-slot{
	position: relative;
	z-index: 1;
	display: grid;
	gap: 5px;
	align-content: start;
	justify-items: center;
	min-width: 0;
}

.chat-loadout-slot:hover{
	z-index: 80;
}

.chat-loadout-slot__icon{
	position: relative;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: linear-gradient(180deg, #243026, #101714);
	border: 2px solid #d8c23d;
	box-shadow: 0 0 0 1px #4b3614, inset 0 0 16px rgba(0,0,0,0.54);
}

.chat-loadout-slot.is-empty .chat-loadout-slot__icon{
	border-color: rgba(202,183,72,0.42);
	background: linear-gradient(180deg, rgba(20,24,21,0.86), rgba(10,13,12,0.92));
}

.chat-loadout-slot__icon img,
.chat-loadout-slot__icon span{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	display: grid;
	place-items: center;
	color: #d9d3a0;
	font-size: 12px;
	font-weight: 900;
}

.chat-loadout-slot__fallback{
	position: relative;
	background:
		radial-gradient(circle at 50% 34%, rgba(230,207,104,0.34), transparent 36%),
		linear-gradient(135deg, rgba(46,55,42,0.95), rgba(13,18,15,0.98));
}

.chat-loadout-slot__fallback:before{
	content: "";
	position: absolute;
	inset: 10px 18px 8px;
	border-radius: 6px 6px 12px 12px;
	background: linear-gradient(180deg, #3b4440, #111714);
	border: 1px solid rgba(229,206,75,0.42);
	box-shadow: inset 0 -10px 0 rgba(0,0,0,0.28);
}

.chat-loadout-slot__fallback.is-boots:before{
	inset: 8px 15px 7px 22px;
	transform: skewX(-10deg);
	border-radius: 10px 7px 13px 5px;
}

.chat-loadout-slot__fallback.is-bottle:before{
	inset: 9px 18px 6px;
	border-radius: 999px 999px 12px 12px;
	background:
		radial-gradient(circle at 50% 28%, #e8bd45 0 24%, transparent 25%),
		linear-gradient(180deg, #b57918, #56320b);
	border-color: rgba(255,221,89,0.62);
}

.chat-loadout-slot__fallback.is-ring:before,
.chat-loadout-slot__fallback.is-necklace:before{
	inset: 14px;
	border-radius: 999px;
	background: radial-gradient(circle, transparent 35%, #d6b24a 38% 58%, #33240a 62%);
}

.chat-loadout-slot__icon b{
	position: absolute;
	right: -7px;
	bottom: -7px;
	min-width: 24px;
	height: 22px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: linear-gradient(180deg, #f6d34d, #c06715);
	color: #2b1200;
	font-size: 13px;
	font-weight: 900;
	text-shadow: 0 1px rgba(255,255,255,0.28);
}

.chat-loadout-slot small{
	max-width: 82px;
	color: #f2e4a7;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-loadout-slot small.is-super,
.chat-item-tooltip__name.is-super{
	color: #ffe45f;
}

.chat-loadout-slot small.is-elite,
.chat-item-tooltip__name.is-elite{
	color: #ff9b3e;
}

.chat-loadout-slot small.is-unique,
.chat-item-tooltip__name.is-unique{
	color: #6ad7ff;
}

.chat-loadout-slot small.is-refined,
.chat-item-tooltip__name.is-refined{
	color: #7bff8a;
}

.chat-loadout-slot small.is-normal,
.chat-item-tooltip__name.is-normal{
	color: #d8d8d8;
}

.chat-item-tooltip{
	position: absolute;
	left: 0;
	top: 54px;
	z-index: 50;
	width: max-content;
	min-width: 250px;
	max-width: 340px;
	padding: 14px 16px;
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(64,16,18,0.98), rgba(20,8,10,0.98)),
		radial-gradient(circle at 50% 0, rgba(255,216,105,0.16), transparent 40%);
	border: 1px solid #f1cf54;
	box-shadow: 0 18px 34px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.08);
	color: #f8e7b4;
	font-family: Tahoma, Verdana, sans-serif;
	text-align: left;
	transform: translate(0, 8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.chat-item-tooltip.is-floating{
	position: fixed;
	left: var(--tooltip-left);
	top: var(--tooltip-top);
	right: auto;
	z-index: 5000;
	transform: none;
}

.chat-loadout-slot[style*="rightWeapon"] .chat-item-tooltip:not(.is-floating),
.chat-loadout-slot[style*="armor"] .chat-item-tooltip:not(.is-floating),
.chat-loadout-slot[style*="garment"] .chat-item-tooltip:not(.is-floating),
.chat-loadout-slot[style*="steed"] .chat-item-tooltip:not(.is-floating),
.chat-loadout-slot[style*="tower"] .chat-item-tooltip:not(.is-floating),
.chat-loadout-slot[style*="mount"] .chat-item-tooltip:not(.is-floating){
	left: auto;
	right: 0;
}

.chat-loadout-slot:hover .chat-item-tooltip{
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

.chat-loadout-slot:hover .chat-item-tooltip.is-floating{
	transform: none;
}

.chat-item-tooltip__name{
	display: block;
	margin-bottom: 2px;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.chat-item-tooltip__quality{
	display: block;
	margin-bottom: 12px;
	color: #e5c16d;
	font-size: 13px;
	font-weight: 800;
}

.chat-item-tooltip__line{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	color: #f6e8c8;
	font-size: 14px;
	line-height: 1.55;
}

.chat-item-tooltip__line span{
	color: #ffffff;
	font-weight: 400;
}

.chat-item-tooltip__line b{
	color: #f6e8c8;
	font-weight: 700;
}

.chat-item-tooltip__line.is-plus b{
	color: #ff4dff;
}

.chat-item-tooltip__description{
	margin: 10px 0 0;
	color: #f1e8cd;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.chat-item-tooltip__bound{
	display: block;
	margin-top: 10px;
	color: #ff38ff;
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
}

.chat-loadout__character{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
	align-items: center;
	min-width: 0;
	padding: 8px;
}

.chat-loadout__name{
	color: #d9ff8c;
	font-size: 20px;
	font-weight: 900;
	text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.chat-loadout__nobility{
	margin-top: 6px;
	margin-bottom: 6px;
}

.chat-loadout__figure{
	width: min(190px, 100%);
	aspect-ratio: 1 / 1.28;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background:
		radial-gradient(ellipse at center, rgba(236,211,130,0.26), transparent 58%),
		linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
}

.chat-loadout__figure .chat-avatar,
.chat-loadout__figure img,
.chat-loadout__figure span{
	width: 126px;
	height: 126px;
	border-radius: 999px;
	object-fit: cover;
}

.chat-loadout__guild{
	min-width: 170px;
	max-width: min(260px, 100%);
	padding: 11px 20px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 50% 8%, rgba(255,236,167,0.34), transparent 45%),
		linear-gradient(180deg, #21a6e4, #0a5f9a 52%, #0b4772);
	border: 1px solid rgba(255,222,136,0.72);
	color: #f8fcff;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	box-shadow:
		0 0 0 1px rgba(16,27,47,0.42),
		0 12px 28px rgba(0,0,0,0.32),
		inset 0 1px 0 rgba(255,255,255,0.3);
}

.chat-loadout__guild.is-clickable{
	cursor: pointer;
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.chat-loadout__guild.is-clickable:hover,
.chat-loadout__guild.is-clickable:focus-visible{
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow:
		0 0 0 1px rgba(255,227,160,0.52),
		0 18px 30px rgba(0,0,0,0.36),
		inset 0 1px 0 rgba(255,255,255,0.34);
}

.chat-loadout__guild.is-clickable:focus-visible{
	outline: 2px solid rgba(255,219,120,0.85);
	outline-offset: 2px;
}

.chat-guild-modal{
	position: fixed;
	inset: 0;
	z-index: 1220;
	display: grid;
	place-items: center;
}

.chat-guild-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(6,10,16,0.74);
	backdrop-filter: blur(6px);
}

.chat-guild-modal__dialog{
	position: relative;
	z-index: 1;
	width: min(980px, calc(100vw - 28px));
	max-height: min(90vh, 940px);
	overflow: auto;
	padding: 20px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(30,40,56,0.98), rgba(17,24,35,0.98)),
		radial-gradient(circle at right top, rgba(179,66,51,0.2), transparent 42%);
	border: 1px solid rgba(255,255,255,0.09);
	box-shadow: 0 28px 72px rgba(0,0,0,0.42);
}

.chat-guild-modal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}

.chat-guild-modal__head h3{
	margin: 0;
	color: #f5f8ff;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.15;
}

.chat-guild-modal__head p{
	margin: 8px 0 0;
	color: #9dc5ff;
	font-size: 16px;
	font-weight: 800;
}

.chat-guild-modal__close{
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
	color: #e2e9f8;
	cursor: pointer;
}

.chat-guild-summary{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.chat-guild-summary__card{
	padding: 12px 14px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(210,26,38,0.26), rgba(108,11,20,0.32));
	border: 1px solid rgba(255,206,112,0.34);
}

.chat-guild-summary__card span{
	display: block;
	color: #ffd992;
	font-size: 12px;
	font-weight: 800;
}

.chat-guild-summary__card strong{
	display: block;
	margin-top: 6px;
	color: #fff9d6;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.15;
}

.chat-guild-table-wrap{
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,204,108,0.26);
	background: rgba(34,10,20,0.48);
}

.chat-guild-table{
	width: 100%;
	border-collapse: collapse;
}

.chat-guild-table thead{
	background: linear-gradient(180deg, rgba(255,212,112,0.2), rgba(165,101,33,0.16));
}

.chat-guild-table th,
.chat-guild-table td{
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid rgba(255,202,106,0.12);
	color: #ffe9b8;
	font-size: 14px;
	font-weight: 700;
}

.chat-guild-table__sort{
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffdba1;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

.chat-guild-table__sort::after{
	content: "";
	display: inline-block;
	margin-left: 6px;
	opacity: 0;
}

.chat-guild-table__sort:hover,
.chat-guild-table__sort.is-active{
	color: #fff4cf;
	text-shadow: 0 0 12px rgba(255,207,110,0.46);
}

.chat-guild-table__sort.is-active[data-sort-dir="asc"]::after{
	content: "▲";
	opacity: 1;
}

.chat-guild-table__sort.is-active[data-sort-dir="desc"]::after{
	content: "▼";
	opacity: 1;
}

.chat-guild-table td i{
	margin-right: 6px;
	color: #ffd56e;
}

.chat-guild-table__nobility{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.2);
	background: linear-gradient(180deg, rgba(75,86,104,0.9), rgba(36,45,60,0.92));
	color: #eef2fb;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}

.chat-guild-table__nobility.is-knight{
	background: linear-gradient(180deg, #9ca3af, #4b5563);
}

.chat-guild-table__nobility.is-baron{
	background: linear-gradient(180deg, #c0843d, #74410f);
	color: #fff1c7;
}

.chat-guild-table__nobility.is-earl{
	background: linear-gradient(180deg, #d8b44c, #895f12);
	color: #fff7d4;
}

.chat-guild-table__nobility.is-duke{
	background: linear-gradient(180deg, #61d3ff, #1c5f95);
	border-color: rgba(160,224,255,0.65);
}

.chat-guild-table__nobility.is-prince{
	background: linear-gradient(180deg, #b887ff, #5c2cc1);
	border-color: rgba(220,192,255,0.72);
	color: #fff5ff;
}

.chat-guild-table__nobility.is-king{
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,0.34), transparent 42%),
		linear-gradient(180deg, #ffe17a, #b77912);
	border-color: rgba(255,230,129,0.9);
	color: #321b00;
	text-shadow: 0 1px rgba(255,255,255,0.28);
}

.chat-guild-table tbody tr:nth-child(even){
	background: rgba(255,255,255,0.02);
}

.chat-friends-modal{
	position: fixed;
	inset: 0;
	z-index: 1230;
	display: grid;
	place-items: center;
}

.chat-friends-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(7,10,16,0.74);
	backdrop-filter: blur(6px);
}

.chat-friends-modal__dialog{
	position: relative;
	z-index: 1;
	width: min(820px, calc(100vw - 28px));
	max-height: min(90vh, 900px);
	overflow: auto;
	padding: 20px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(28,39,56,0.98), rgba(16,24,36,0.98)),
		radial-gradient(circle at right top, rgba(87,120,208,0.22), transparent 46%);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 28px 72px rgba(0,0,0,0.42);
}

.chat-friends-modal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.chat-friends-modal__head h3{
	margin: 0;
	color: #f1f6ff;
	font-size: 30px;
	font-weight: 900;
}

.chat-friends-modal__close{
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
	color: #e4ebfb;
	cursor: pointer;
}

.chat-friends-tabs{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.chat-friends-tab{
	height: 44px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	color: #d7e3f7;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

.chat-friends-tab.is-active{
	background: linear-gradient(180deg, rgba(88,101,242,0.45), rgba(88,101,242,0.18));
	border-color: rgba(201,169,106,0.45);
	color: #fff;
}

.chat-friends-section.is-hidden{
	display: none;
}

.chat-friends-list{
	display: grid;
	gap: 10px;
}

.chat-friends-list-section{
	display: grid;
	gap: 8px;
}

.chat-friends-list-section__head{
	height: 32px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-radius: 12px;
	background: linear-gradient(90deg, #2e3a48, #374452 88%, rgba(55,68,82,0.2));
	color: #dce5f2;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .04em;
}

.chat-friend-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	color: #ecf2ff;
	text-align: right;
}

.chat-friend-row__open{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: right;
	cursor: pointer;
}

.chat-friend-row__avatar{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid rgba(255,218,122,0.5);
	background: linear-gradient(180deg, #203040, #142031);
}

.chat-friend-row__avatar img,
.chat-friend-row__avatar span{
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	object-fit: cover;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.chat-friend-row__main{
	flex: 1 1 auto;
	min-width: 0;
}

.chat-friend-row__remove{
	flex: 0 0 auto;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #9a3e3e, #6f2525);
	color: #fff0f0;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.chat-friend-row__name{
	display: block;
	font-size: 20px;
	line-height: 1.1;
	font-weight: 900;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-friend-row__preview{
	display: block;
	margin-top: 5px;
	color: #bfd0ea;
	font-size: 12px;
	font-weight: 700;
}

.chat-friend-row:hover{
	border-color: rgba(201,169,106,0.45);
	background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

.chat-friends-empty{
	padding: 14px;
	border: 1px dashed rgba(255,255,255,0.2);
	border-radius: 12px;
	color: #c9d8f2;
	font-size: 13px;
	font-weight: 700;
}

.chat-friends-requests{
	display: grid;
	gap: 10px;
}

.chat-friend-request{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.chat-friend-request__info strong{
	display: block;
	color: #f2f6ff;
	font-size: 14px;
	font-weight: 900;
}

.chat-friend-request__info small{
	color: #bed0eb;
	font-size: 12px;
	font-weight: 700;
}

.chat-friend-request__actions{
	display: inline-flex;
	gap: 7px;
}

.chat-friend-request__actions button{
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #2f8ad9, #1a69af);
	color: #f1faff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.chat-friend-request__actions button.is-muted{
	background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
	color: #e6edf8;
}

.chat-group-builder{
	display: grid;
	gap: 10px;
}

.chat-group-builder__label{
	color: #ecf3ff;
	font-size: 13px;
	font-weight: 800;
}

.chat-group-builder__input{
	height: 44px;
	padding: 0 12px;
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 12px;
	background: rgba(255,255,255,0.08);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.chat-group-builder__members{
	max-height: 260px;
	overflow: auto;
	display: grid;
	gap: 8px;
	padding: 4px 2px;
}

.chat-group-members-section{
	display: grid;
	gap: 6px;
}

.chat-group-members-section__head{
	height: 34px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-radius: 12px;
	background: linear-gradient(90deg, #2e3a48, #374452 88%, rgba(55,68,82,0.2));
	color: #dce5f2;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .04em;
}

.chat-group-member{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 8px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
	border: 1px solid rgba(255,255,255,0.12);
	color: #eef3fd;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.chat-group-member input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chat-group-member__check{
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	transform: rotate(45deg);
	border-radius: 2px;
	border: 1px solid rgba(255,255,255,0.42);
	background: rgba(0,0,0,0.2);
}

.chat-group-member__avatar{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid rgba(255,218,122,0.5);
	background: linear-gradient(180deg, #203040, #142031);
}

.chat-group-member__avatar img,
.chat-group-member__avatar span{
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	object-fit: cover;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.chat-group-member__name{
	flex: 1 1 auto;
	font-size: 22px;
	line-height: 1.1;
	font-weight: 900;
	letter-spacing: .01em;
}

.chat-group-member input[type="checkbox"]:checked + .chat-group-member__check{
	background: linear-gradient(180deg, #3e97e6, #2466a7);
	border-color: rgba(173,220,255,0.95);
	box-shadow: 0 0 0 1px rgba(36,102,167,0.35);
}

.chat-group-member input[type="checkbox"]:checked ~ .chat-group-member__name{
	color: #ffffff;
}

.chat-group-member:hover{
	border-color: rgba(201,169,106,0.45);
	background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

.chat-group-builder__submit{
	height: 46px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, #3a95e6, #1a6db5);
	color: #f3fbff;
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
}

.chat-group-builder__note{
	margin: 0;
	color: #ffe2a6;
	font-size: 13px;
	font-weight: 700;
	min-height: 18px;
}

.chat-loadout__panel{
	position: relative;
	z-index: 1;
	padding: 18px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(126,17,22,0.96), rgba(103,11,18,0.98)),
		radial-gradient(circle at 50% 20%, rgba(255,198,85,0.12), transparent 34%);
	border: 2px solid #d2a536;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 22px 44px rgba(0,0,0,0.3);
	color: #ffe8b3;
}

.chat-loadout__power-card{
	display: grid;
	place-items: center;
	gap: 4px;
	margin: -4px 0 16px;
	padding: 14px 12px;
	border-radius: 16px;
	background:
		radial-gradient(circle at 50% 8%, rgba(255,238,159,0.42), transparent 38%),
		linear-gradient(180deg, rgba(58,20,14,0.9), rgba(33,11,9,0.86));
	border: 1px solid rgba(255,216,90,0.6);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 22px rgba(0,0,0,0.24);
}

.chat-loadout__power-card span{
	width: 70px;
	height: 70px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 24%, #9f8cff, #26359b 66%, #10154d);
	border: 3px solid #f4d56b;
	color: #fff;
	font-size: 30px;
	font-weight: 950;
	line-height: 1;
	text-shadow: 0 2px 4px rgba(0,0,0,0.75);
}

.chat-loadout__power-card b{
	color: #ffe18a;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-style: italic;
	font-weight: 900;
	text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}

.chat-loadout__panel:after{
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: -10px;
	height: 20px;
	background: linear-gradient(135deg, transparent 0 50%, #d2a536 51% 58%, transparent 59%);
	opacity: 0.7;
}

.chat-loadout__panel-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.chat-loadout__panel-head strong{
	color: #fff8d8;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.2;
}

.chat-loadout__panel-head small{
	color: #ffd979;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.chat-loadout__summary{
	display: grid;
	gap: 8px;
}

.chat-loadout__summary span{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(255,220,124,0.16);
}

.chat-loadout__summary b,
.chat-loadout__summary strong{
	color: #fff5ce;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
}

.chat-message__avatar img,
.chat-message__avatar span{
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: grid;
	place-items: center;
	object-fit: cover;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-weight: 800;
	font-size: 24px;
	position: relative;
	z-index: 2;
}

.chat-composer{
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 42px auto;
	gap: 10px;
	padding: 18px 24px 24px;
	border-top: 1px solid rgba(45,58,79,0.16);
	background: linear-gradient(180deg, rgba(25,34,48,0.95), rgba(20,28,39,0.98));
	position: relative;
	z-index: 2;
}

.chat-emoji{
	position: relative;
}

.chat-emoji__panel{
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	min-width: 220px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.16);
	background: linear-gradient(180deg, rgba(20,28,40,0.98), rgba(12,18,28,0.98));
	box-shadow: 0 12px 30px rgba(0,0,0,0.35);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	z-index: 20;
}

.chat-emoji__panel button{
	height: 32px;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
	background: rgba(255,255,255,0.04);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.chat-emoji__panel button:hover{
	background: rgba(255,255,255,0.12);
}

.chat-composer__input{
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(247,248,251,0.98), rgba(233,237,243,0.95));
	color: #fff;
	color: #132032;
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

.chat-composer__input::placeholder{
	color: #7f8aa0;
}

.chat-composer__send{
	padding: 0 22px;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(180deg, #c9a96a, #a57c34);
	color: #0f1720;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 14px 24px rgba(165,124,52,0.28);
}

@keyframes chatPulse{
	0%{
		opacity: .7;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		transform: scale(1.08);
	}
}

@media (max-width: 991px){
	.chat-panel{
		width: min(100vw - 12px, 980px);
		height: min(92vh, 920px);
	}

	.chat-panel__shell{
		grid-template-columns: 1fr;
		min-height: 100%;
		max-height: 100%;
	}

	.chat-panel__sidebar{
		border-left: 0;
		border-bottom: 1px solid rgba(255,255,255,0.05);
	}
}

@media (max-width: 640px){
	.chat-dock{
		right: 10px;
		left: 10px;
		bottom: 10px;
	}

	.chat-fab{
		width: 100%;
		justify-content: center;
	}

	.chat-panel{
		right: 0;
		left: 0;
		width: 100%;
		height: calc(100vh - 12px);
		max-height: calc(100vh - 12px);
	}

	.chat-panel__shell{
		border-radius: 22px;
		min-height: 100%;
	}

	.chat-composer{
		grid-template-columns: 42px minmax(0, 1fr) 42px;
	}

	.chat-composer__send{
		grid-column: 1 / -1;
		height: 48px;
	}

	.chat-sidebar-actions{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chat-sidebar-action{
		height: 44px;
		padding: 0 6px;
		font-size: 12px;
	}

	.chat-sidebar-action span{
		display: none;
	}

	.chat-room-banner,
	.chat-room-head{
		flex-direction: column;
		align-items: flex-start;
	}

	.chat-message__bubble{
		max-width: 100%;
	}

	.chat-player-modal__dialog{
		width: calc(100vw - 20px);
		padding: 16px;
		border-radius: 22px;
	}

	.chat-player-card__hero{
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.chat-player-card__badge{
		grid-column: 1 / -1;
		justify-self: start;
	}

	.chat-player-card__avatar{
		width: 88px;
		height: 88px;
	}

	.chat-player-card__meta strong{
		font-size: 22px;
	}

	.chat-player-card__option{
		flex-direction: column;
		align-items: flex-start;
	}

	.chat-player-card__option span{
		font-size: 22px;
	}

	.chat-player-card__actions{
		grid-template-columns: 1fr;
	}

	.chat-profile-modal__dialog{
		width: calc(100vw - 20px);
		padding: 16px;
		border-radius: 22px;
	}

	.chat-guild-modal__dialog{
		width: calc(100vw - 18px);
		padding: 14px;
		border-radius: 18px;
	}

	.chat-friends-modal__dialog{
		width: calc(100vw - 18px);
		padding: 14px;
		border-radius: 18px;
	}

	.chat-friends-tabs{
		grid-template-columns: 1fr;
	}

	.chat-guild-summary{
		grid-template-columns: 1fr;
	}

	.chat-guild-table th,
	.chat-guild-table td{
		padding: 10px 8px;
		font-size: 12px;
	}

	.chat-profile-card__hero{
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.chat-profile-card__avatar{
		width: 88px;
		height: 88px;
	}

	.chat-profile-card__meta strong{
		font-size: 22px;
	}

	.chat-profile-card__stats{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chat-profile-card__equipment{
		display: block;
	}

	.chat-loadout{
		grid-template-columns: 1fr;
	}

	.chat-loadout__board{
		grid-template-columns: repeat(4, minmax(62px, 1fr));
		grid-template-rows: auto;
		grid-template-areas:
			"power power power power"
			"head neck rightWeapon armor"
			"ring character character garment"
			"leftWeapon character character steed"
			"boots bottle tower mount"
			"fan fan fan fan";
		gap: 10px;
		padding: 14px;
	}

	.chat-loadout-slot__icon{
		width: 52px;
		height: 52px;
	}

	.chat-loadout-slot small{
		max-width: 68px;
	}

	.chat-loadout__figure{
		width: 132px;
	}

	.chat-loadout__figure .chat-avatar,
	.chat-loadout__figure img,
	.chat-loadout__figure span{
		width: 92px;
		height: 92px;
	}

	.chat-loadout__guild{
		min-width: 132px;
		max-width: 100%;
		padding: 9px 14px;
		font-size: 13px;
		letter-spacing: .03em;
	}
}

/* Sections */
.section{
	padding: 60px 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
	border-top: 1px solid rgba(255,255,255,0.06);
}

.section .section-title{
	text-align: center;
	margin-bottom: 24px;
	color: #fff;
}

.feature-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
}

.feature-card{
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 20px;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.feature-card h3{
	margin-top: 0;
	margin-bottom: 8px;
}

.grid-gallery{
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
	gap: 10px;
}

.grid-gallery img{
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.08);
}

/* Footer enhancements */
.footer-modern{
	background: var(--bg-alt);
	border-top: 1px solid rgba(255,255,255,0.06);
	padding: 60px 0 24px 0;
	margin-top: 80px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.footer-section h3 {
	color: #fff;
	margin-bottom: 16px;
	font-size: 18px;
}

.footer-section p {
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 0;
}

.footer-logo-img {
	width: 60px;
	height: auto;
	margin-bottom: 16px;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-links a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-links a:hover {
	color: #fff;
}

.social-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.social-links a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.social-links a:hover {
	color: var(--primary);
}

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 24px;
	text-align: center;
}

.footer-bottom p {
	color: var(--muted);
	margin-bottom: 8px;
}

.footer-bottom a {
	color: var(--text);
}

.policies a{
	color: var(--muted);
	text-decoration: none;
}

.policies a:hover{
	color: #fff;
}

/* Utilities */
.container-modern{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Fix button clickability */
.btn, button, a {
	pointer-events: auto !important;
	cursor: pointer !important;
}

.btn-primary-modern, .btn-ghost {
	display: inline-block;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn-primary-modern:hover, .btn-ghost:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

/* Forms */
input[type="text"], input[type="password"], input[type="email"], select, textarea{
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	color: #fff;
	padding: 12px 14px;
	width: 100%;
}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="email"]::placeholder{ color: #bfc3cf; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus{
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(88,101,242,0.25);
}

button.submit, .btn.btn-dark, .btn.btn-danger{
	border-radius: 10px !important;
	border: none !important;
	background: var(--primary) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 12px 16px !important;
	box-shadow: 0 6px 24px rgba(88,101,242,0.3) !important;
}
button.submit:hover, .btn.btn-dark:hover, .btn.btn-danger:hover{
	background: var(--primary-600) !important;
}

/* Tables */
table{
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	color: var(--text);
}
table thead th{
	background: rgba(255,255,255,0.06);
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
table tbody tr:hover{
	background: rgba(255,255,255,0.04);
}

/* Store Grid */
.store-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.store-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	position: relative;
	transition: all 0.3s ease;
}

.store-card:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
	box-shadow: 0 8px 32px rgba(88,101,242,0.2);
}

.store-featured {
	border-color: var(--accent);
	background: linear-gradient(180deg, rgba(234,179,8,0.08), rgba(234,179,8,0.02));
}

.store-badge {
	position: absolute;
	top: -8px;
	right: 12px;
	background: var(--accent);
	color: #000;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.store-item-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(88,101,242,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px auto;
}

.store-item-icon i {
	font-size: 24px;
	color: var(--primary);
}

.store-card h3 {
	color: #fff;
	margin-bottom: 8px;
	font-size: 18px;
}

.store-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 8px;
}

.store-description {
	color: var(--muted);
	margin-bottom: 20px;
	font-size: 14px;
}

.store-card .btn {
	width: 100%;
}

/* Download Table */
.download-table-container {
	max-width: 1000px;
	margin: 0 auto;
	overflow-x: auto;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
}

.download-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.download-table th {
	background: rgba(255,255,255,0.08);
	color: #fff;
	padding: 16px;
	text-align: left;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.download-table td {
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color: var(--text);
}

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

.file-type {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.file-type.client {
	background: rgba(34,197,94,0.15);
	color: #bbf7d0;
}

.file-type.patch {
	background: rgba(234,179,8,0.15);
	color: #fef3c7;
}

.download-table .btn {
	padding: 8px 16px;
	font-size: 14px;
}

/* About Conquer Section */
.about-conquer {
	text-align: center;
}

.about-content p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--muted);
	max-width: 800px;
	margin: 0 auto 40px auto;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.stat-item {
	text-align: center;
	padding: 24px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
}

.stat-item i {
	font-size: 32px;
	color: var(--primary);
	margin-bottom: 16px;
}

.stat-item h3 {
	font-size: 36px;
	color: #fff;
	margin-bottom: 8px;
	font-weight: 700;
}

.stat-item p {
	color: var(--muted);
	margin: 0;
}

/* Character Classes Section */
.classes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.class-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
}

.class-card:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
	box-shadow: 0 8px 32px rgba(88,101,242,0.2);
}

.class-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 16px auto;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.class-icon img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.class-card h3 {
	color: #fff;
	margin-bottom: 12px;
	font-size: 20px;
}

.class-card p {
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 20px;
}

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

.stat-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--muted);
}

.stat-bar span:first-child {
	min-width: 60px;
	text-align: left;
}

.bar {
	flex: 1;
	height: 4px;
	background: rgba(255,255,255,0.1);
	border-radius: 2px;
	overflow: hidden;
}

.bar div {
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	border-radius: 2px;
}

/* Detailed Features Section */
.features-detailed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}

.feature-detailed {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.feature-icon {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	background: rgba(88,101,242,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.feature-icon i {
	font-size: 24px;
	color: var(--primary);
}

.feature-content h3 {
	color: #fff;
	margin-bottom: 8px;
	font-size: 18px;
}

.feature-content p {
	color: var(--muted);
	line-height: 1.6;
	margin: 0;
}

/* Events Preview Section */
.events-preview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.event-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 24px;
	transition: all 0.3s ease;
}

.event-card:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}

.event-time {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
	font-weight: 600;
	margin-bottom: 12px;
}

.event-card h3 {
	color: #fff;
	margin-bottom: 12px;
	font-size: 18px;
}

.event-card p {
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 16px;
}

.event-reward {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
	font-weight: 600;
	font-size: 14px;
}

/* Modern Signup Page Styles */
.signup-hero {
	background: linear-gradient(135deg, rgba(88,101,242,0.12) 0%, rgba(234,179,8,0.08) 100%);
	padding: 80px 0 60px 0;
	text-align: center;
}

.signup-hero-content h1 {
	font-size: clamp(32px, 4vw, 48px);
	color: #fff;
	margin-bottom: 16px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.signup-hero-content p {
	font-size: 18px;
	color: var(--muted);
	margin-bottom: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.hero-stats {
	display: flex;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}

.hero-stat {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-weight: 600;
}

.hero-stat i {
	color: var(--primary);
	font-size: 20px;
}

.signup-section {
	padding: 80px 0;
}

.signup-container {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
}

.signup-form-container {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.signup-form-header {
	text-align: center;
	margin-bottom: 32px;
}

.signup-form-header h2 {
	color: #fff;
	font-size: 28px;
	margin-bottom: 8px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.signup-form-header p {
	color: var(--muted);
	font-size: 16px;
	margin: 0;
}

.signup-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

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

.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
}

.form-group label i {
	color: var(--primary);
	width: 16px;
}

.form-group input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	color: #fff;
	padding: 14px 16px;
	font-size: 16px;
	transition: all 0.3s ease;
}

.form-group input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(88,101,242,0.25);
	background: rgba(255,255,255,0.08);
}

.form-group input::placeholder {
	color: var(--muted);
}

.form-group small {
	color: var(--muted);
	font-size: 12px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.captcha-group {
	margin-top: 8px;
}

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

.captcha-container input {
	flex: 1;
}

.captcha-image {
	width: 120px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.16);
	cursor: pointer;
	transition: all 0.3s ease;
}

.captcha-image:hover {
	border-color: var(--primary);
	transform: scale(1.02);
}

.btn-signup {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	box-shadow: 0 8px 24px rgba(88,101,242,0.35);
}

.btn-signup:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(88,101,242,0.45);
}

.btn-signup:active {
	transform: translateY(0);
}

.signup-footer {
	text-align: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.signup-footer p {
	color: var(--muted);
	margin: 8px 0;
}

.signup-footer a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.signup-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.signup-benefits {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 32px;
	height: fit-content;
}

.signup-benefits h3 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 24px;
	text-align: center;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.benefit {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-items: flex-start;
}

.benefit:last-child {
	margin-bottom: 0;
}

.benefit i {
	color: var(--primary);
	font-size: 20px;
	margin-top: 4px;
	flex-shrink: 0;
}

.benefit h4 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 4px;
	font-weight: 600;
}

.benefit p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* Alert Styles */
.alert {
	padding: 16px;
	border-radius: 10px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
}

.alert-error {
	background: rgba(239,68,68,0.15);
	border: 1px solid rgba(239,68,68,0.3);
	color: #fca5a5;
}

.alert-success {
	background: rgba(34,197,94,0.15);
	border: 1px solid rgba(34,197,94,0.3);
	color: #bbf7d0;
}

.alert i {
	font-size: 18px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.signup-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	
	.signup-form-container {
		padding: 24px;
	}
	
	.form-row {
		grid-template-columns: 1fr;
	}
	
	.hero-stats {
		flex-direction: column;
		gap: 16px;
	}
	
	.captcha-container {
		flex-direction: column;
		align-items: stretch;
	}
	
	.captcha-image {
		align-self: center;
	}
}

/* Modern Login Page Styles */
.login-hero {
	background: linear-gradient(135deg, rgba(88,101,242,0.10) 0%, rgba(234,179,8,0.06) 100%);
	padding: 60px 0 50px 0;
	text-align: center;
}

.login-hero-content h1 {
	font-size: clamp(28px, 4vw, 42px);
	color: #fff;
	margin-bottom: 12px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.login-hero-content p {
	font-size: 16px;
	color: var(--muted);
	margin-bottom: 32px;
}

.login-section {
	padding: 60px 0;
}

.login-container {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 50px;
	max-width: 1000px;
	margin: 0 auto;
}

.login-form-container {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.login-form-header {
	text-align: center;
	margin-bottom: 24px;
}

.login-form-header h2 {
	color: #fff;
	font-size: 24px;
	margin-bottom: 6px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.login-form-header p {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.btn-login {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	box-shadow: 0 6px 20px rgba(88,101,242,0.35);
}

.btn-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(88,101,242,0.45);
}

.btn-login:active {
	transform: translateY(0);
}

.login-footer {
	text-align: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.login-footer p {
	color: var(--muted);
	margin: 6px 0;
	font-size: 14px;
}

.login-footer a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.login-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.login-benefits {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 24px;
	height: fit-content;
}

.login-benefits h3 {
	color: #fff;
	font-size: 18px;
	margin-bottom: 20px;
	text-align: center;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

/* Responsive Design for Login */
@media (max-width: 768px) {
	.login-container {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.login-form-container {
		padding: 20px;
	}
}

/* Modern Password Recovery Page Styles */
.recovery-hero {
	background: linear-gradient(135deg, rgba(88,101,242,0.08) 0%, rgba(234,179,8,0.04) 100%);
	padding: 60px 0 50px 0;
	text-align: center;
}

.recovery-hero-content h1 {
	font-size: clamp(28px, 4vw, 40px);
	color: #fff;
	margin-bottom: 12px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.recovery-hero-content p {
	font-size: 16px;
	color: var(--muted);
	margin-bottom: 32px;
}

.recovery-steps {
	display: flex;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}

.step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-weight: 600;
}

.step-number {
	background: var(--primary);
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.recovery-section {
	padding: 60px 0;
}

.recovery-container {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 50px;
	max-width: 1000px;
	margin: 0 auto;
}

.recovery-form-container {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.recovery-form-header {
	text-align: center;
	margin-bottom: 24px;
}

.recovery-form-header h2 {
	color: #fff;
	font-size: 24px;
	margin-bottom: 6px;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.recovery-form-header p {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}

.recovery-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.btn-recovery {
	background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	box-shadow: 0 6px 20px rgba(234,179,8,0.35);
}

.btn-recovery:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(234,179,8,0.45);
}

.btn-recovery:active {
	transform: translateY(0);
}

.recovery-footer {
	text-align: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.recovery-footer p {
	color: var(--muted);
	margin: 6px 0;
	font-size: 14px;
}

.recovery-footer a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.recovery-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.recovery-help {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 24px;
	height: fit-content;
}

.recovery-help h3 {
	color: #fff;
	font-size: 18px;
	margin-bottom: 20px;
	text-align: center;
	font-family: "NotoSerif-Bold", ui-serif, Georgia, serif;
}

.help-item {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	align-items: flex-start;
}

.help-item:last-child {
	margin-bottom: 0;
}

.help-item i {
	color: var(--accent);
	font-size: 18px;
	margin-top: 2px;
	flex-shrink: 0;
}

.help-item h4 {
	color: #fff;
	font-size: 14px;
	margin-bottom: 4px;
	font-weight: 600;
}

.help-item p {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
}

/* Responsive Design for Recovery */
@media (max-width: 768px) {
	.recovery-container {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.recovery-form-container {
		padding: 20px;
	}
	
	.recovery-steps {
		flex-direction: column;
		gap: 16px;
	}
}

/* Loading Animations and Smooth Transitions */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Apply animations to elements */
.hero .content {
	animation: fadeInUp 1s ease-out;
}

.feature-cards .feature-card {
	animation: fadeInUp 0.8s ease-out;
	animation-fill-mode: both;
}

.feature-cards .feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-cards .feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-cards .feature-card:nth-child(3) { animation-delay: 0.3s; }

.screenshot-gallery .screenshot {
	animation: fadeInUp 0.6s ease-out;
	animation-fill-mode: both;
}

.screenshot-gallery .screenshot:nth-child(1) { animation-delay: 0.1s; }
.screenshot-gallery .screenshot:nth-child(2) { animation-delay: 0.2s; }
.screenshot-gallery .screenshot:nth-child(3) { animation-delay: 0.3s; }
.screenshot-gallery .screenshot:nth-child(4) { animation-delay: 0.4s; }

.server-stat {
	animation: fadeInUp 0.7s ease-out;
	animation-fill-mode: both;
}

.server-stat:nth-child(1) { animation-delay: 0.1s; }
.server-stat:nth-child(2) { animation-delay: 0.2s; }
.server-stat:nth-child(3) { animation-delay: 0.3s; }
.server-stat:nth-child(4) { animation-delay: 0.4s; }

.class-card {
	animation: fadeInUp 0.6s ease-out;
	animation-fill-mode: both;
}

.class-card:nth-child(1) { animation-delay: 0.1s; }
.class-card:nth-child(2) { animation-delay: 0.2s; }
.class-card:nth-child(3) { animation-delay: 0.3s; }
.class-card:nth-child(4) { animation-delay: 0.4s; }

.event-card {
	animation: fadeInLeft 0.7s ease-out;
	animation-fill-mode: both;
}

.event-card:nth-child(1) { animation-delay: 0.1s; }
.event-card:nth-child(2) { animation-delay: 0.2s; }
.event-card:nth-child(3) { animation-delay: 0.3s; }

/* Hover animations */
.feature-card:hover {
	animation: pulse 0.6s ease-in-out;
}

.store-item:hover {
	animation: float 2s ease-in-out infinite;
}

.btn-primary-modern:hover,
.btn-ghost:hover,
.btn-signup:hover,
.btn-login:hover,
.btn-recovery:hover {
	animation: pulse 0.3s ease-in-out;
}

/* Loading spinner */
.loading-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
}

/* Shimmer loading effect for images */
.loading-shimmer {
	background: linear-gradient(90deg, 
		rgba(255,255,255,0) 0%, 
		rgba(255,255,255,0.2) 50%, 
		rgba(255,255,255,0) 100%);
	background-size: 200px 100%;
	animation: shimmer 1.5s infinite;
}

/* Smooth transitions for all interactive elements */
* {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced hover effects */
.nav-link {
	position: relative;
	overflow: hidden;
}

.nav-link::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary);
	transition: width 0.3s ease;
}

.nav-link:hover::before {
	width: 100%;
}

/* Page load animation */
body {
	animation: fadeInUp 0.5s ease-out;
}

/* Stagger animation for form groups */
.form-group {
	animation: fadeInUp 0.5s ease-out;
	animation-fill-mode: both;
}

.signup-form .form-group:nth-child(1) { animation-delay: 0.1s; }
.signup-form .form-group:nth-child(2) { animation-delay: 0.2s; }
.signup-form .form-group:nth-child(3) { animation-delay: 0.3s; }
.signup-form .form-group:nth-child(4) { animation-delay: 0.4s; }
.signup-form .form-group:nth-child(5) { animation-delay: 0.5s; }

/* Legacy join message compatibility inside modern signup page */
.signup-form-container .join_error_msg {
	position: static;
	left: auto;
	top: auto;
	width: 100%;
	height: auto;
	padding: 12px 14px;
	margin: 0 0 14px 0;
	border-radius: 12px;
	background: rgba(120, 20, 20, 0.2);
	border: 1px solid rgba(255, 80, 80, 0.35);
	color: #ffd7d7;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.5;
}

.signup-form-container .join_error_msg p {
	margin: 6px 0 10px 0;
}

.signup-form-container .join_error_msg img {
	width: 28px !important;
	height: 28px;
	display: inline-block;
	vertical-align: middle;
}

.signup-form-container .join_error_msg a {
	display: inline-block;
	width: auto;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	text-decoration: none;
}

.signup-form-container .join_error_msg.succ {
	background: rgba(18, 100, 52, 0.24);
	border-color: rgba(70, 220, 140, 0.45);
	color: #ddffe9;
}

.login-form .form-group:nth-child(1) { animation-delay: 0.1s; }
.login-form .form-group:nth-child(2) { animation-delay: 0.2s; }

.recovery-form .form-group:nth-child(1) { animation-delay: 0.1s; }
.recovery-form .form-group:nth-child(2) { animation-delay: 0.2s; }
.recovery-form .form-group:nth-child(3) { animation-delay: 0.3s; }

/* Entrance animations for benefits */
.benefit {
	animation: fadeInRight 0.6s ease-out;
	animation-fill-mode: both;
}

.benefit:nth-child(1) { animation-delay: 0.1s; }
.benefit:nth-child(2) { animation-delay: 0.2s; }
.benefit:nth-child(3) { animation-delay: 0.3s; }
.benefit:nth-child(4) { animation-delay: 0.4s; }

/* Discord Widget */
.discord-widget-container {
	position: fixed !important;
	bottom: 20px !important;
	left: 20px !important;
	width: 350px !important;
	height: 500px !important;
	z-index: 1000 !important;
	background: rgba(0, 0, 0, 0.9) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
	transition: all 0.3s ease !important;
	overflow: hidden !important;
}

.discord-widget-container.minimized {
	height: 60px !important;
}

.discord-widget-container .discord-toggle {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	background: #5865F2 !important;
	border: none !important;
	color: white !important;
	padding: 5px 10px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	z-index: 10 !important;
}

.discord-widget-container iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 8px !important;
}

.chat-empty-state{
	min-height: 100%;
	display: grid;
	place-content: center;
	gap: 12px;
	padding: 32px;
	text-align: center;
	color: #213042;
}

.chat-empty-state strong{
	font-size: 24px;
	color: #152235;
}

.chat-empty-state p{
	margin: 0;
	max-width: 520px;
	color: rgba(21,34,53,0.72);
}

.chat-composer__input:disabled,
.chat-composer__send:disabled{
	opacity: .55;
	cursor: not-allowed;
}

@media (max-width: 768px){
	.hero{min-height: 56vh;}
	.mainnav .cta{margin-top: 8px;}
	.discord-widget-container {
		display: none !important;
	}
}

/* Store Modern */
.store-hero-modern {
	position: relative;
	overflow: hidden;
	padding: 84px 0 72px;
	background: radial-gradient(90% 120% at 85% 10%, rgba(230, 173, 48, 0.18), rgba(13, 18, 31, 0.95) 60%), linear-gradient(135deg, #121a2f 0%, #090e19 100%);
}

.store-hero-modern__bg {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.03) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.03) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.03) 80%);
	opacity: 0.35;
}

.store-hero-modern__content {
	position: relative;
	z-index: 1;
}

.store-kicker {
	margin: 0 0 8px;
	color: #f8d37f;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 12px;
	font-weight: 700;
}

.store-hero-modern h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(34px, 5vw, 58px);
}

.store-subtitle {
	max-width: 680px;
	margin-top: 12px;
	color: rgba(240, 246, 255, 0.84);
	font-size: 18px;
}

.store-hero-modern__actions {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.store-layout-modern {
	display: grid;
	grid-template-columns: 310px minmax(0, 1fr);
	gap: 22px;
	margin-top: -48px;
	position: relative;
	z-index: 2;
}

.store-side-card,
.store-main-panel,
.store-orders-panel {
	border: 1px solid rgba(223, 177, 67, 0.24);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(11, 18, 32, 0.95), rgba(9, 14, 25, 0.95));
	box-shadow: 0 18px 45px rgba(4, 8, 16, 0.5);
}

.store-side-card {
	padding: 18px;
}

.store-side-card h3 {
	margin: 0 0 14px;
	color: #fff;
}

.store-account-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #e7eefb;
}

.store-account-row span {
	opacity: 0.75;
}

.store-side-note {
	margin-top: 18px;
	padding: 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.store-side-note h4 {
	margin: 0 0 8px;
	color: #f8d37f;
}

.store-side-note p {
	margin: 4px 0;
	color: #d5e0f4;
}

.store-main-panel,
.store-orders-panel {
	padding: 18px;
}

.store-main-panel__head h2 {
	margin: 0;
	color: #fff;
}

.store-main-panel__head p {
	margin: 8px 0 0;
	color: #aebedb;
}

.store-products-grid-modern {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.store-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.store-card-modern {
	position: relative;
	border: 1px solid rgba(223, 177, 67, 0.2);
	border-radius: 14px;
	padding: 16px;
	background: linear-gradient(180deg, rgba(91, 23, 23, 0.28), rgba(20, 25, 41, 0.8));
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.store-card-modern:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 206, 96, 0.68);
	box-shadow: 0 12px 28px rgba(6, 8, 14, 0.45);
}

.store-card-modern.is-featured {
	border-color: rgba(255, 206, 96, 0.6);
}

.store-card-modern__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #f1c45d;
	color: #291807;
	font-size: 11px;
	font-weight: 700;
}

.store-card-modern__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 40% 20%, rgba(255, 229, 150, 0.22), rgba(255, 255, 255, 0.06));
	border: 1px solid rgba(255, 215, 127, 0.24);
	color: #ffd77f;
	font-size: 22px;
	overflow: hidden;
	box-shadow: inset 0 0 18px rgba(255, 215, 127, 0.08), 0 10px 24px rgba(0,0,0,0.25);
}

.store-card-modern__icon img {
	max-width: 54px;
	max-height: 54px;
	object-fit: contain;
	image-rendering: auto;
}

.store-card-modern h3 {
	margin: 12px 0 6px;
	color: #fff;
}

.store-card-modern__amount {
	margin: 0;
	color: #dbe7ff;
	font-weight: 600;
}

.store-card-modern__price {
	margin: 8px 0;
	color: #ffe38f;
	font-size: 20px;
	font-weight: 800;
}

.store-card-modern__desc {
	margin: 0 0 14px;
	color: #aec0df;
	min-height: 38px;
}

.store-orders-wrap {
	margin-top: 20px;
}

.store-orders-list {
	margin-top: 16px;
	display: grid;
	gap: 12px;
}

.store-order-card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.store-order-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: #fff;
}

.store-status {
	display: inline-flex;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
}

.store-status--pending { background: rgba(255, 187, 66, 0.16); color: #ffd386; }
.store-status--paid { background: rgba(90, 179, 255, 0.16); color: #9fd8ff; }
.store-status--delivered { background: rgba(81, 206, 130, 0.16); color: #95f2bc; }
.store-status--cancelled,
.store-status--failed { background: rgba(233, 95, 95, 0.17); color: #ffadad; }

.store-order-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}

.store-order-grid p {
	margin: 0;
	color: #d8e4fb;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.store-order-grid span {
	font-size: 12px;
	opacity: 0.72;
}

.store-order-note {
	margin: 10px 0 0;
	color: #a8bedf;
}

.store-admin-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.store-muted {
	color: #9eb2d4;
	margin: 0;
}

@media (max-width: 980px) {
	.store-layout-modern {
		grid-template-columns: 1fr;
		margin-top: 14px;
	}
}

body.store-checkout-open {
	overflow: hidden;
}

.store-checkout-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px;
}

.store-checkout-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 10, 25, 0.78);
	backdrop-filter: blur(6px);
}

.store-checkout-modal__panel {
	position: relative;
	width: min(980px, 96vw);
	background: linear-gradient(160deg, #161f3d 0%, #141933 55%, #10172c 100%);
	border: 1px solid rgba(121, 169, 255, 0.28);
	border-radius: 18px;
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
	overflow: hidden;
}

.store-checkout-modal__close {
	position: absolute;
	top: 10px;
	left: 12px;
	border: 0;
	background: transparent;
	color: #d7e7ff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.store-checkout-modal__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.store-checkout-summary,
.store-checkout-payment {
	padding: 30px;
}

.store-checkout-summary {
	border-right: 1px solid rgba(109, 153, 236, 0.2);
}

.store-checkout-summary h3,
.store-checkout-payment h3 {
	margin: 0 0 18px;
	color: #f2f7ff;
	font-size: 25px;
	font-weight: 800;
}

.store-checkout-product {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: rgba(8, 15, 34, 0.6);
	border: 1px solid rgba(109, 153, 236, 0.22);
	border-radius: 14px;
}

.store-checkout-product__icon {
	width: 84px;
	height: 84px;
	border-radius: 12px;
	background: rgba(9, 16, 34, 0.95);
	display: grid;
	place-items: center;
	color: #8fd3ff;
	font-size: 34px;
	flex-shrink: 0;
}

.store-checkout-product__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.store-checkout-product__meta h4 {
	margin: 0 0 7px;
	color: #f2f7ff;
	font-size: 24px;
}

.store-checkout-product__meta p {
	margin: 0 0 6px;
	color: #a8bcde;
	font-size: 14px;
}

.store-checkout-total {
	margin-top: 18px;
	padding: 16px;
	border-radius: 14px;
	background: rgba(7, 13, 30, 0.65);
	border: 1px solid rgba(109, 153, 236, 0.22);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.store-checkout-total span {
	color: #9cb3d8;
	font-size: 15px;
}

.store-checkout-total strong {
	color: #ffffff;
	font-size: 31px;
	font-weight: 900;
}

.store-pay-method {
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid rgba(96, 154, 255, 0.38);
	background: rgba(10, 22, 49, 0.75);
	margin-bottom: 18px;
}

.store-pay-method:not(.is-active) {
	opacity: 0.82;
	border-color: rgba(120, 136, 170, 0.3);
}

.store-pay-method__left {
	display: flex;
	gap: 12px;
	align-items: center;
	color: #e7f0ff;
}

.store-pay-method__left i {
	font-size: 28px;
	color: #59b7ff;
}

.store-pay-method__left p {
	margin: 4px 0 0;
	color: #9eb7de;
	font-size: 13px;
}

.store-pay-method__badge {
	background: rgba(89, 183, 255, 0.2);
	color: #89d3ff;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.store-checkout-confirm {
	width: 100%;
	min-height: 54px;
	font-size: 18px;
	font-weight: 800;
}

@media (max-width: 860px) {
	.store-checkout-modal__body {
		grid-template-columns: 1fr;
	}
	.store-checkout-summary {
		border-right: 0;
		border-bottom: 1px solid rgba(109, 153, 236, 0.2);
	}
}

.store-admin-page {
	margin-top: 14px;
}

.store-admin-toolbar {
	margin-top: 16px;
	display: grid;
	grid-template-columns: 200px minmax(220px, 1fr) auto auto;
	gap: 10px;
	align-items: end;
}

.store-admin-toolbar label {
	display: grid;
	gap: 6px;
	color: #d8e4fb;
	font-size: 13px;
}

.store-input {
	height: 38px;
	border-radius: 9px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(9, 14, 25, 0.9);
	color: #ecf3ff;
	padding: 0 10px;
}

.store-input:focus {
	outline: none;
	border-color: rgba(255, 206, 96, 0.7);
}

.store-admin-form {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 8px;
}

.store-admin-product-form {
	margin-top: 14px;
	display: grid;
	gap: 16px;
}

#product-form {
	display: none !important;
}

.product-split-manager {
	margin-top: 16px;
	display: grid;
	gap: 14px;
}

.product-split-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(140px, 1fr));
	gap: 10px;
}

.product-tab-button {
	min-height: 78px;
	border: 1px solid rgba(255,255,255,0.11);
	border-radius: 8px;
	padding: 12px;
	display: grid;
	gap: 6px;
	text-align: left;
	color: #eaf2ff;
	background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
	cursor: pointer;
}

.product-tab-button.is-active,
.product-tab-button:hover {
	border-color: rgba(255, 206, 96, 0.72);
	background: linear-gradient(180deg, rgba(90,36,20,0.35), rgba(255,255,255,0.035));
}

.product-tab-button i {
	color: #ffd77f;
	font-size: 20px;
}

.product-split-panel {
	display: none;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 14px;
	background: rgba(255,255,255,0.025);
}

.product-split-panel.is-active {
	display: block;
}

.product-split-panel h3 {
	margin: 0 0 12px;
	color: #fff;
}

.store-admin-product-form label {
	color: #d8e4fb;
	font-size: 13px;
	display: grid;
	gap: 7px;
}

.product-kind-picker,
.product-tab-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 10px;
}

.product-tab-header h3 {
	margin: 0;
	color: #fff;
	font-size: 20px;
}

.product-tab-header p {
	margin: 6px 0 0;
	color: #aebedb;
}

.product-kind {
	border: 1px solid rgba(255,255,255,0.11);
	border-radius: 16px;
	padding: 14px;
	display: grid;
	gap: 5px;
	text-align: left;
	color: #eaf2ff;
	background:
		radial-gradient(circle at top right, rgba(234,179,8,0.12), transparent 42%),
		linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.product-kind:hover,
.product-kind.is-active {
	transform: translateY(-2px);
	border-color: rgba(255, 206, 96, 0.72);
	background:
		radial-gradient(circle at top right, rgba(234,179,8,0.22), transparent 45%),
		linear-gradient(180deg, rgba(90,36,20,0.35), rgba(255,255,255,0.035));
}

.product-kind i {
	color: #ffd77f;
	font-size: 22px;
}

.product-kind strong {
	font-size: 18px;
}

.product-kind span {
	color: #aebedb;
	font-size: 12px;
}

.product-editor-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 16px;
	align-items: start;
}

.product-editor-fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(170px, 1fr));
	gap: 10px;
}

.product-wide {
	grid-column: 1 / -1;
}

.product-preview-card {
	position: sticky;
	top: 92px;
	border: 1px solid rgba(255, 206, 96, 0.28);
	border-radius: 18px;
	padding: 16px;
	background:
		radial-gradient(circle at 50% 0%, rgba(234,179,8,0.18), transparent 45%),
		linear-gradient(180deg, rgba(45, 18, 18, 0.86), rgba(13, 19, 32, 0.92));
	box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.product-preview-image,
.product-manager-thumb {
	width: 74px;
	height: 74px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 215, 127, 0.35);
	background: rgba(255,255,255,0.06);
	color: #ffd77f;
	overflow: hidden;
}

.product-preview-image img,
.product-manager-thumb img {
	max-width: 62px;
	max-height: 62px;
	object-fit: contain;
}

.product-preview-card strong {
	display: block;
	margin-top: 12px;
	color: #fff;
	font-size: 20px;
}

.product-preview-card span,
.product-preview-card p {
	color: #aebedb;
	margin: 6px 0 0;
}

.product-flags,
.product-form-actions {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.product-flags label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.store-admin-product-form[data-product-type="item"] .field-coin-kind {
	display: none;
}

.store-admin-product-form[data-product-type="cps"] .field-item,
.store-admin-product-form[data-product-type="cps"] .field-image,
.store-admin-product-form[data-product-type="gold"] .field-item,
.store-admin-product-form[data-product-type="gold"] .field-image,
.store-admin-product-form[data-product-type="game_coin"] .field-item,
.store-admin-product-form[data-product-type="game_coin"] .field-image {
	display: none;
}

.store-admin-product-form[data-product-type="cps"] .field-coin-kind,
.store-admin-product-form[data-product-type="gold"] .field-coin-kind {
	display: none;
}

.product-manager-card {
	position: relative;
	padding-left: 102px;
	min-height: 104px;
}

.product-manager-card .product-manager-thumb {
	position: absolute;
	left: 14px;
	top: 14px;
}

.store-admin-actions {
	grid-column: 1 / -1;
}

@media (max-width: 980px) {
	.store-admin-toolbar {
		grid-template-columns: 1fr;
	}
	.store-admin-form {
		grid-template-columns: 1fr;
	}
	.store-admin-product-form {
		grid-template-columns: 1fr;
	}
	.product-kind-picker,
	.product-tab-nav,
	.product-split-tabs,
	.product-editor-grid,
	.product-editor-fields {
		grid-template-columns: 1fr;
	}
	.product-preview-card {
		position: static;
	}
	.product-manager-card {
		padding-left: 12px;
		padding-top: 100px;
	}
}

/* Final sidebar override.
   This is intentionally placed at the end because older global nav rules and
   Bootstrap accessibility rules above were still winning on some pages. */
@media (min-width: 1200px) {
	html body {
		padding-left: 300px !important;
		overflow-x: hidden !important;
	}

	body .site-header {
		position: fixed !important;
		inset: 0 auto 0 0 !important;
		width: 300px !important;
		height: 100vh !important;
		overflow: hidden !important;
		background:
			radial-gradient(circle at 20% 0%, rgba(223, 177, 67, 0.12), transparent 34%),
			linear-gradient(180deg, rgba(9, 13, 24, 0.98), rgba(10, 15, 28, 0.98)) !important;
		border-right: 1px solid rgba(223, 177, 67, 0.18) !important;
		border-bottom: 0 !important;
		box-shadow: 18px 0 45px rgba(0, 0, 0, 0.28) !important;
	}

	body .site-header .topbar,
	body .site-header .nav-status-item,
	body .site-header .badge-online,
	body .site-header .badge-user {
		display: none !important;
	}

	body .site-header .mainnav {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		padding: 14px !important;
		background: transparent !important;
	}

	body .site-header .mainnav > .container {
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		overflow: hidden !important;
	}

	body .site-header .navbar-toggler {
		display: none !important;
	}

	body .site-header .navbar-brand,
	body .site-header .sidebar-account-card,
	body .site-header .navbar-collapse,
	body .site-header .navbar-nav,
	body .site-header .nav-item,
	body .site-header .nav-link {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
	}

	body .site-header .navbar-brand {
		height: 48px !important;
		margin: 0 0 12px 0 !important;
		padding: 0 12px !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		border-radius: 14px !important;
		background: rgba(255, 255, 255, 0.055) !important;
		color: #f5f7fb !important;
		font-size: 20px !important;
		text-decoration: none !important;
	}

	body .site-header .navbar-brand img {
		width: 34px !important;
		height: 34px !important;
		object-fit: contain !important;
	}

	body .site-header .sidebar-account-card {
		min-height: 74px !important;
		margin: 0 0 14px 0 !important;
		padding: 10px 12px !important;
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		border-radius: 16px !important;
		border: 1px solid rgba(126, 148, 255, 0.24) !important;
		background: linear-gradient(145deg, rgba(27, 37, 62, 0.96), rgba(13, 19, 34, 0.96)) !important;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20) !important;
	}

	body .site-header .sidebar-account-avatar {
		width: 48px !important;
		height: 48px !important;
		flex: 0 0 48px !important;
		border-radius: 50% !important;
		overflow: hidden !important;
		border: 2px solid rgba(223, 177, 67, 0.72) !important;
	}

	body .site-header .sidebar-account-avatar img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	body .site-header .sidebar-account-meta {
		min-width: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
	}

	body .site-header .sidebar-account-meta strong {
		max-width: 190px !important;
		color: #ffffff !important;
		font-size: 15px !important;
		line-height: 1.1 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body .site-header .sidebar-account-meta small {
		max-width: 190px !important;
		color: rgba(220, 229, 246, 0.72) !important;
		font-size: 12px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body .site-header .sidebar-account-meta span {
		margin-top: 3px !important;
		padding: 2px 9px !important;
		border-radius: 999px !important;
		background: rgba(88, 101, 242, 0.24) !important;
		color: #dce5ff !important;
		font-size: 11px !important;
		line-height: 1.35 !important;
	}

	body .site-header .navbar-collapse {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	body .site-header .mainnav-links {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		align-items: stretch !important;
	}

	body .site-header .nav-item {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	body .site-header .mainnav-links .nav-link {
		height: 46px !important;
		min-height: 46px !important;
		margin: 0 !important;
		padding: 0 14px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		border-radius: 12px !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		background: rgba(255, 255, 255, 0.035) !important;
		color: rgba(241, 245, 255, 0.86) !important;
		font-size: 15px !important;
		font-weight: 650 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		line-height: 1 !important;
		position: relative !important;
	}

	body .site-header .mainnav-links .nav-link:hover,
	body .site-header .mainnav-links .nav-link:focus {
		background: rgba(223, 177, 67, 0.16) !important;
		border-color: rgba(223, 177, 67, 0.42) !important;
		color: #ffffff !important;
		text-decoration: none !important;
	}

	body .site-header .mainnav-links .nav-link::before,
	body .site-header .mainnav-links .nav-link::after {
		display: none !important;
		content: none !important;
	}

	body .site-header .mainnav-links .nav-link.cta {
		justify-content: center !important;
		background: linear-gradient(135deg, #5865f2, #4452dc) !important;
		border-color: rgba(126, 148, 255, 0.58) !important;
		color: #ffffff !important;
	}
}

/* Keep chat dock above legacy user-page action buttons. */
body .chat-dock {
	z-index: 200000 !important;
}

body .chat-dock .chat-panel {
	z-index: 200001 !important;
}

body .containerss .join-container {
	z-index: 10 !important;
}