.ranking-modern-card {
	background: linear-gradient(180deg, rgba(12, 8, 35, 0.96) 0%, rgba(7, 5, 22, 0.98) 100%) !important;
	border: 1px solid rgba(133, 98, 255, 0.10) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40) !important;
	overflow: hidden !important;
}

.ranking-modern-hero {
	margin-bottom: 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.ranking-modern-search {
	padding: 22px 24px 10px 24px !important;
}

.ranking-modern-input {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(140,110,255,0.12) !important;
	color: #f1ecff !important;
	height: 46px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.ranking-modern-input::placeholder {
	color: #9e91d1 !important;
}

.ranking-modern-input:focus {
	border-color: rgba(128, 216, 255, 0.35) !important;
	box-shadow: 0 0 0 0.15rem rgba(91, 192, 255, 0.10) !important;
}

.ranking-modern-btn {
	height: 46px !important;
	border-radius: 10px !important;
	border: 0 !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	background: linear-gradient(135deg, #7b5cff 0%, #3cb8ff 100%) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(58, 124, 255, 0.18) !important;
}

.ranking-modern-tabs-wrap {
	padding: 0 24px 8px 24px !important;
}

.ranking-modern-tabs {
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ranking-modern-tabs .nav-link {
	background: transparent !important;
	border: 0 !important;
	color: #b7a9ea !important;
	font-weight: 700 !important;
	padding: 12px 18px !important;
	border-bottom: 2px solid transparent !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.ranking-modern-tabs .nav-link img {
	height: 18px !important;
	width: auto !important;
}

.ranking-modern-tabs .nav-link.active {
	color: #ffffff !important;
	border-bottom: 2px solid #5bd1ff !important;
}

.ranking-modern-table-wrap {
	padding: 8px 24px 12px 24px !important;
}

table.ranking-modern-table {
	width: 100% !important;
	margin-bottom: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 8px !important;
	color: #d7d0ff !important;
}

table.ranking-modern-table thead th {
	border: 0 !important;
	background: transparent !important;
	color: #9182df !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	padding: 6px 12px 8px 12px !important;
}

table.ranking-modern-table tbody tr {
	background: linear-gradient(90deg, rgba(21, 14, 55, 0.96) 0%, rgba(10, 7, 31, 0.98) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(133, 98, 255, 0.08) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

table.ranking-modern-table tbody tr:hover {
	transform: translateY(-1px) !important;
	background: linear-gradient(90deg, rgba(28, 19, 74, 0.98) 0%, rgba(13, 10, 42, 1) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(154, 124, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

table.ranking-modern-table tbody td,
table.ranking-modern-table tbody th {
	border: 0 !important;
	background: transparent !important;
	padding: 13px 12px !important;
	vertical-align: middle !important;
	font-size: 14px !important;
	color: #d6d0ff !important;
}

table.ranking-modern-table tbody tr td:first-child,
table.ranking-modern-table tbody tr th:first-child {
	border-top-left-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
}

table.ranking-modern-table tbody tr td:last-child,
table.ranking-modern-table tbody tr th:last-child {
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.ranking-modern-table tbody .ranking-modern-rank {
	color: #b9abef !important;
	font-weight: 700 !important;
}

.ranking-modern-table tbody .ranking-modern-name {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-shadow: 0 0 8px rgba(255,255,255,0.10) !important;
}

.ranking-modern-table tbody .ranking-modern-leader {
	color: #d8d1ff !important;
	font-weight: 600 !important;
}

.ranking-modern-table tbody .ranking-modern-empire img {
	height: 22px !important;
	width: auto !important;
	border-radius: 3px !important;
	box-shadow: 0 0 6px rgba(255,255,255,0.08) !important;
}

.ranking-modern-table tbody .ranking-modern-level {
	color: #dcd4ff !important;
	font-weight: 600 !important;
}

.ranking-modern-table tbody .ranking-modern-points {
	color: #45ddff !important;
	font-weight: 700 !important;
}

.ranking-modern-table tbody .ranking-modern-empty {
	text-align: center !important;
	color: #b9abef !important;
	padding: 18px !important;
}

.ranking-modern-pagination {
	padding: 8px 24px 22px 24px !important;
}

.ranking-modern-card {
	background: linear-gradient(180deg, rgba(12, 8, 35, 0.96) 0%, rgba(7, 5, 22, 0.98) 100%) !important;
	border: 1px solid rgba(133, 98, 255, 0.10) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40) !important;
	overflow: hidden !important;
}

.ranking-modern-hero {
	margin-bottom: 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.ranking-modern-search {
	padding: 22px 24px 10px 24px !important;
}

.ranking-modern-input {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(140,110,255,0.12) !important;
	color: #f1ecff !important;
	height: 46px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.ranking-modern-input::placeholder {
	color: #9e91d1 !important;
}

.ranking-modern-input:focus {
	border-color: rgba(128, 216, 255, 0.35) !important;
	box-shadow: 0 0 0 0.15rem rgba(91, 192, 255, 0.10) !important;
}

.ranking-modern-btn {
	height: 46px !important;
	border-radius: 10px !important;
	border: 0 !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	background: linear-gradient(135deg, #7b5cff 0%, #3cb8ff 100%) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(58, 124, 255, 0.18) !important;
}

.ranking-modern-btn:hover {
	filter: brightness(1.06) !important;
}

.ranking-modern-tabs-wrap {
	padding: 0 24px 8px 24px !important;
}

.ranking-modern-tabs {
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ranking-modern-tabs .nav-link {
	background: transparent !important;
	border: 0 !important;
	color: #b7a9ea !important;
	font-weight: 700 !important;
	padding: 12px 18px !important;
	border-bottom: 2px solid transparent !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.ranking-modern-tabs .nav-link img {
	height: 18px !important;
	width: auto !important;
}

.ranking-modern-tabs .nav-link.active {
	color: #ffffff !important;
	border-bottom: 2px solid #5bd1ff !important;
}

.ranking-modern-table-wrap {
	padding: 8px 24px 12px 24px !important;
}

table.ranking-modern-table {
	width: 100% !important;
	margin-bottom: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 8px !important;
	color: #d7d0ff !important;
}

table.ranking-modern-table thead th {
	border: 0 !important;
	background: transparent !important;
	color: #9182df !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	padding: 6px 12px 8px 12px !important;
}

table.ranking-modern-table tbody tr {
	background: linear-gradient(90deg, rgba(21, 14, 55, 0.96) 0%, rgba(10, 7, 31, 0.98) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(133, 98, 255, 0.08) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

table.ranking-modern-table tbody tr:hover {
	transform: translateY(-1px) !important;
	background: linear-gradient(90deg, rgba(28, 19, 74, 0.98) 0%, rgba(13, 10, 42, 1) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(154, 124, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

table.ranking-modern-table tbody td,
table.ranking-modern-table tbody th {
	border: 0 !important;
	background: transparent !important;
	padding: 13px 12px !important;
	vertical-align: middle !important;
	font-size: 14px !important;
	color: #d6d0ff !important;
}

table.ranking-modern-table tbody tr td:first-child,
table.ranking-modern-table tbody tr th:first-child {
	border-top-left-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
}

table.ranking-modern-table tbody tr td:last-child,
table.ranking-modern-table tbody tr th:last-child {
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

table.ranking-modern-table tbody td:nth-child(2) {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-shadow: 0 0 8px rgba(255,255,255,0.10) !important;
}

table.ranking-modern-table tbody td:nth-child(4) {
	color: #3fe0ff !important;
	font-weight: 700 !important;
}

table.ranking-modern-table tbody td:nth-child(5) {
	color: #dcd4ff !important;
	font-weight: 600 !important;
}

table.ranking-modern-table tbody td:nth-child(6) {
	color: #c2b9ff !important;
	font-weight: 600 !important;
}

.ranking-modern-pagination {
	padding: 8px 24px 22px 24px !important;
}

.ranking-modern-pagination .pagination {
	margin-bottom: 0 !important;
}

.ranking-modern-pagination .pagination > li > a,
.ranking-modern-pagination .pagination > li > span {
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid rgba(133, 98, 255, 0.10) !important;
	color: #d7d0ff !important;
	margin: 0 3px !important;
	border-radius: 8px !important;
}

.ranking-modern-pagination .pagination > .active > a,
.ranking-modern-pagination .pagination > .active > span,
.ranking-modern-pagination .pagination > .active > a:hover,
.ranking-modern-pagination .pagination > .active > span:hover {
	background: linear-gradient(135deg, #7b5cff 0%, #3cb8ff 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
}

@media (max-width: 767px) {
	.ranking-modern-search,
	.ranking-modern-tabs-wrap,
	.ranking-modern-table-wrap,
	.ranking-modern-pagination {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	table.ranking-modern-table thead th,
	table.ranking-modern-table tbody td,
	table.ranking-modern-table tbody th {
		padding: 10px 8px !important;
		font-size: 12px !important;
	}
}
.card.top10-card {
	background: linear-gradient(180deg, #0f0b24 0%, #090614 100%) !important;
	border: 1px solid rgba(140, 110, 255, 0.08) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40) !important;
	overflow: hidden !important;
}

.card.top10-card .card-body.top10-card-body {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.card.top10-card .card-body.top10-card-body .card-title {
	color: #ddd2ff !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	margin-bottom: 0 !important;
}

.top10-table-wrap {
	padding: 0 10px 8px 10px !important;
}

table.top10-modern-table {
	width: 100% !important;
	margin-bottom: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 6px !important;
	color: #d8d1ff !important;
}

table.top10-modern-table thead th {
	border: 0 !important;
	background: transparent !important;
	color: #8f80de !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	padding: 4px 8px 6px 8px !important;
}

table.top10-modern-table tbody tr {
	background: linear-gradient(90deg, rgba(20, 13, 50, 0.92) 0%, rgba(10, 7, 31, 0.94) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(133, 98, 255, 0.05) !important;
	transition: all 0.18s ease !important;
}

table.top10-modern-table tbody tr:hover {
	background: linear-gradient(90deg, rgba(26, 18, 65, 0.95) 0%, rgba(12, 9, 38, 0.98) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(154, 124, 255, 0.10), 0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

table.top10-modern-table tbody td {
	background: transparent !important;
	border: 0 !important;
	padding: 9px 8px !important;
	vertical-align: middle !important;
	font-size: 13px !important;
	color: #cec7ff !important;
}

table.top10-modern-table tbody tr td:first-child {
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}

table.top10-modern-table tbody tr td:last-child {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.top10-col-rank,
.top10-rank-cell {
	width: 42px !important;
	text-align: center !important;
}

.top10-col-level,
.top10-level-cell,
.top10-col-clv,
.top10-clv-cell {
	width: 48px !important;
	text-align: center !important;
}

.top10-col-empire,
.top10-empire-cell {
	width: 72px !important;
	text-align: right !important;
}

table.top10-modern-table .top10-player-name {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1px !important;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.10) !important;
}

table.top10-modern-table .top10-stat {
	color: #d5ceff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

table.top10-modern-table .top10-clv {
	color: #45ddff !important;
	font-weight: 700 !important;
	text-shadow: 0 0 6px rgba(69, 221, 255, 0.14) !important;
}

table.top10-modern-table .top10-empire {
	font-size: 13px !important;
	font-weight: 700 !important;
}

table.top10-modern-table .top10-empire.shinsoo {
	color: #ff6c6c !important;
}

table.top10-modern-table .top10-empire.chunjo {
	color: #ffd34d !important;
}

table.top10-modern-table .top10-empire.jinno {
	color: #48a9ff !important;
}

table.top10-modern-table .top10-rank-badge {
	width: 24px !important;
	height: 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 7px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #f4f0ff !important;
	background: rgba(255, 255, 255, 0.05) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

table.top10-modern-table .top10-rank-badge.rank-gold {
	background: linear-gradient(135deg, #ffd85d 0%, #ffb300 100%) !important;
	color: #2a1800 !important;
	box-shadow: 0 0 8px rgba(255, 211, 93, 0.16) !important;
}

table.top10-modern-table .top10-rank-badge.rank-silver {
	background: linear-gradient(135deg, #efefef 0%, #9d9d9d 100%) !important;
	color: #1f1f1f !important;
	box-shadow: 0 0 8px rgba(239, 239, 239, 0.10) !important;
}

table.top10-modern-table .top10-rank-badge.rank-bronze {
	background: linear-gradient(135deg, #d88d4f 0%, #974d1d 100%) !important;
	color: #fff !important;
	box-shadow: 0 0 8px rgba(216, 141, 79, 0.10) !important;
}

.top10-footer {
	padding: 12px 0 16px 0 !important;
}
<style>
@keyframes popBadge {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.popular-badge {
	animation: popBadge 1.5s infinite;
}
</style>

.site-layout {
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.container {
    max-width: 1400px !important;
}

.wrapper {
    display: flex;
}

.left { width: 28%; }
.center { width: 50%; }
.right { width: 22%; }

.content {
    min-width: 0;
}

.left-sidebar,
.right-sidebar {
	width: 260px;
	flex: 0 0 260px;
}

.main-content {
	flex: 1;
	min-width: 0;
}

.page-hd {
	background-image: none!important;
	border-bottom: 1px solid #191432;
	margin-top: 5px;
	margin-bottom: 10px;
}
.account-info-box {
	padding: 15px 20px;
	color: #d8d8d8;
	font-size: 20px;
	line-height: 1.9;
}

.account-info-box p {
	margin-bottom: 12px;
}

.account-info-box strong {
	color: #ffffff;
	font-weight: 600;
}
.fade {
	opacity: 1!important;
}
.jumbotron, .modal-content, .list-group-item {
	background-color: #0c0c0c;
}
.list-group-item:hover {
	background-color: black;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 21px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 10px 15px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #ffffff;
  background-color: #000;
  border: 1px solid transparent;
  margin-left: -1px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: white;
  background-color: #0d0c0c;
  border-color: #0d0c0c
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #ffffff;
  background-color: #140b48;
  border-color: transparent;
  cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #ffffff;
  background-color: #007053;
  border-color: transparent;
  cursor: not-allowed;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 18px 27px;
  font-size: 19px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.pager {
  padding-left: 0;
  margin: 21px 0;
  list-style: none;
  text-align: center;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #00bc8c;
  border: 1px solid transparent;
  border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #00dba3;
}
.pager .next > a,
.pager .next > span {
  float: right;
}
.pager .previous > a,
.pager .previous > span {
  float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #dddddd;
  background-color: #00bc8c;
  cursor: not-allowed;
}