html {
	/* Removes the vertical scrollbar caused by Bulma */
	overflow-y: auto;
}

.char-name.title {
	margin-bottom: 0px;
}
:root{
	--mw-bg-0:#050816;
	--mw-bg-1:#0b1120;
	--mw-bg-2:#10192b;
	--mw-panel:rgba(10,16,32,.82);
	--mw-panel-2:rgba(12,20,38,.92);
	--mw-line:rgba(95,243,255,.16);
	--mw-line-strong:rgba(95,243,255,.34);
	--mw-cyan:#5ff3ff;
	--mw-cyan-2:#13d7ff;
	--mw-purple:#a855f7;
	--mw-text:#eaf7ff;
	--mw-text-soft:#9fc3d9;
	--mw-shadow:0 0 0 1px rgba(95,243,255,.06), 0 0 18px rgba(95,243,255,.10), 0 0 40px rgba(168,85,247,.08);
	--mw-radius:16px;
	--mw-radius-sm:12px;
}

/* ===== GLOBAL ===== */
html,
body{
	background:
		radial-gradient(circle at 15% 0%, rgba(95,243,255,.10), transparent 28%),
		radial-gradient(circle at 85% 0%, rgba(168,85,247,.12), transparent 34%),
		linear-gradient(180deg, #0b1020 0%, #070b16 42%, #04070e 100%) !important;
	color:var(--mw-text);
}

body{
	font-family:Inter, "Segoe UI", Arial, sans-serif;
}

a{
	color:var(--mw-cyan);
	text-decoration:none;
	transition:color .18s ease, text-shadow .18s ease;
}

a:hover{
	color:#bdfcff;
	text-shadow:0 0 10px rgba(95,243,255,.35);
}

strong,
.title,
.subtitle,
.label{
	color:#fff !important;
}

.char-name.title{
	background:linear-gradient(90deg,#ffffff 0%, #8ff9ff 35%, #ca8fff 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	text-transform:uppercase;
	letter-spacing:.04em;
	font-weight:900;
}

hr{
	border:none;
	height:1px;
	background:linear-gradient(90deg, transparent, rgba(95,243,255,.55), rgba(168,85,247,.45), transparent);
	box-shadow:0 0 16px rgba(95,243,255,.12);
}

/* ===== PANELS ===== */
.box,
.notification,
.message-body,
.dropdown-content,
.table-container{
	background:
		linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
		var(--mw-panel) !important;
	border:1px solid var(--mw-line) !important;
	border-radius:var(--mw-radius) !important;
	box-shadow:var(--mw-shadow);
	backdrop-filter:blur(10px);
}

.box:hover{
	border-color:var(--mw-line-strong) !important;
}

/* ===== BUTTONS ===== */
.button,
.pagination-link,
.pagination-next,
.pagination-previous{
	background:
		linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
		linear-gradient(90deg, rgba(12,21,40,.96), rgba(20,18,46,.96)) !important;
	color:#eefcff !important;
	border:1px solid rgba(95,243,255,.22) !important;
	border-radius:12px !important;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.06em;
	box-shadow:
		0 0 0 1px rgba(95,243,255,.04),
		inset 0 1px 0 rgba(255,255,255,.05),
		0 0 14px rgba(95,243,255,.10);
}

.button:hover,
.pagination-link:hover,
.pagination-next:hover,
.pagination-previous:hover{
	border-color:rgba(95,243,255,.48) !important;
	color:#fff !important;
	box-shadow:
		0 0 0 1px rgba(95,243,255,.08),
		0 0 18px rgba(95,243,255,.20),
		0 0 28px rgba(168,85,247,.14);
}

.button.is-primary,
.button.is-link,
.button.is-info,
.button.is-success,
.button.is-warning,
.button.is-danger{
	background:linear-gradient(90deg, #13d7ff 0%, #6fe8ff 24%, #8f6fff 72%, #c16bff 100%) !important;
	border:none !important;
	color:#fff !important;
}

/* ===== FORMS ===== */
.input,
.textarea,
.select select{
	background:rgba(6,10,22,.88) !important;
	color:var(--mw-text) !important;
	border:1px solid rgba(95,243,255,.20) !important;
	border-radius:12px !important;
	box-shadow:none !important;
}

.input:hover,
.textarea:hover,
.select select:hover{
	border-color:rgba(95,243,255,.34) !important;
}

.input:focus,
.textarea:focus,
.select select:focus{
	border-color:rgba(95,243,255,.52) !important;
	box-shadow:
		0 0 0 1px rgba(95,243,255,.10),
		0 0 16px rgba(95,243,255,.14) !important;
}

.select:not(.is-multiple):not(.is-loading)::after{
	border-color:var(--mw-cyan) !important;
}

/* ===== TABLES ===== */
.table{
	background:transparent !important;
	color:var(--mw-text) !important;
}

.table thead th{
	color:var(--mw-cyan) !important;
	text-transform:uppercase;
	letter-spacing:.10em;
	font-size:.78rem;
	border-bottom:1px solid rgba(95,243,255,.24) !important;
	background:rgba(10,17,34,.72) !important;
}

.table td,
.table th{
	border-color:rgba(95,243,255,.10) !important;
}

.table tbody tr:hover{
	background:rgba(95,243,255,.06) !important;
}

/* ===== DATATABLES ===== */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length{
	color:var(--mw-text-soft) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
	background:rgba(6,10,22,.88) !important;
	color:#fff !important;
	border:1px solid rgba(95,243,255,.20) !important;
	border-radius:10px !important;
}

table.dataTable tbody tr{
	background-color:rgba(10,16,30,.82) !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd{
	background-color:rgba(13,20,38,.92) !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover{
	background:
		linear-gradient(180deg, rgba(95,243,255,.06), rgba(168,85,247,.04)),
		rgba(14,22,40,.96) !important;
}

table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td{
	border-top:1px solid rgba(95,243,255,.08) !important;
}

/* ===== TABS / TAGS / MSG ===== */
.tabs li a{
	color:var(--mw-text-soft) !important;
	text-transform:uppercase;
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.10em;
}

.tabs li.is-active a,
.tabs li a:hover{
	color:#fff !important;
	border-bottom-color:var(--mw-cyan) !important;
	box-shadow:inset 0 -1px 0 var(--mw-cyan);
}

.tag{
	background:rgba(95,243,255,.10) !important;
	color:var(--mw-cyan) !important;
	border:1px solid rgba(95,243,255,.22);
	border-radius:999px;
}

.message-header{
	background:linear-gradient(90deg, rgba(12,21,40,.96), rgba(21,18,46,.96)) !important;
	color:#fff !important;
}

/* ===== GUILD / ARENA HEADER ONLY ===== */
#guild-header,
#arena-header{
	background:
		linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
		rgba(8,14,28,.84) !important;
	border:1px solid rgba(95,243,255,.12);
	border-radius:18px;
	box-shadow:var(--mw-shadow);
	padding:18px;
}

#guild-header .info,
#arena-header .info{
	color:var(--mw-text);
}

.faction{
	background:rgba(95,243,255,.08);
	border:1px solid rgba(95,243,255,.16);
	border-radius:999px;
	padding:8px 12px;
}

/* ===== ACHIEVEMENTS SAFE ONLY ===== */
.achievement{
	background:
		linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
		rgba(8,14,28,.82);
	border:1px solid rgba(95,243,255,.10);
	border-radius:18px;
	box-shadow:0 0 0 1px rgba(95,243,255,.04), 0 0 16px rgba(95,243,255,.08);
}

.achievement .name,
.achievement .points,
.achievement .description{
	color:var(--mw-text-soft);
}

.achievement.earned .name,
.achievement.earned .points,
.achievement.earned .description{
	color:#fff;
}

/* ===== TALENTS SAFE ONLY ===== */
.talent-tree .header{
	padding:12px 14px;
	border-radius:14px;
	background:linear-gradient(90deg, rgba(12,21,40,.96), rgba(23,18,47,.96));
	border:1px solid rgba(95,243,255,.12);
	box-shadow:0 0 18px rgba(95,243,255,.08);
	color:#fff;
}

.talent-tree .cols{
	padding:16px 14px;
	border-radius:18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
		rgba(7,13,25,.70);
	border:1px solid rgba(95,243,255,.10);
}

/* ===== SCROLL ===== */
::-webkit-scrollbar{
	width:10px;
	height:10px;
}

::-webkit-scrollbar-track{
	background:rgba(255,255,255,.03);
}

::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg, rgba(95,243,255,.70), rgba(168,85,247,.70));
	border-radius:999px;
	border:2px solid transparent;
	background-clip:padding-box;
}