main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0;
	font-family: var(--font-4)
}

h2 {
	font-family: var(--font-4)
}

h3 {
	font-family: var(--font-4)
}

h4 {
	font-family: var(--font-4)
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	border-color: rgba(0, 0, 0, .15)
}

template {
	display: none
}

img {
	border-style: none;
	display: inline-block
}

iframe {
	max-width: 100%
}

img {
	max-width: 100%
}

video {
	max-width: 100%
}

a {
	background-color: transparent;
	color: #ffba70;
	color: rgba(var(--color-url), 1);
	transition-duration: .2s;
	transition-property: opacity, color, background-color;
	outline: 0;
	text-decoration: underline
}

a:hover {
	text-decoration: none
}

a:active {
	outline: 0
}

a:focus {
	outline: 0
}

::-webkit-input-placeholder {
	color: #81674e;
	color: var(--input-placeholder-color);
	opacity: 1
}

:-moz-placeholder {
	color: #81674e;
	color: var(--input-placeholder-color);
	opacity: 1
}

::-moz-placeholder {
	color: #81674e;
	color: var(--input-placeholder-color);
	opacity: 1
}

:-ms-input-placeholder {
	color: #81674e;
	color: var(--input-placeholder-color);
	opacity: 1
}

:focus::-webkit-input-placeholder {
	color: transparent;
	color: var(--input-placeholder-color-focus)
}

:focus:-moz-placeholder {
	color: transparent;
	color: var(--input-placeholder-color-focus)
}

:focus::-moz-placeholder {
	color: transparent;
	color: var(--input-placeholder-color-focus)
}

:focus:-ms-input-placeholder {
	color: transparent;
	color: var(--input-placeholder-color-focus)
}

[class*=" gwi_"]:before {
	margin: 0;
	width: auto
}

[class^=gwi_]:before {
	margin: 0;
	width: auto
}

ol {
	padding-left: 1.375em;
	margin: .625em 0
}

ul {
	padding-left: 1.375em;
	margin: .625em 0
}

td {
	border: 1px solid rgba(255, 178, 111, .14);
	border: var(--border);
	padding: .625em 1em
}

th {
	border: 1px solid rgba(255, 178, 111, .14);
	border: var(--border);
	padding: .625em 1em
}

html {
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--font-0);
}

.page {
	min-height: 100vh;
	min-height: 100dvh;
	min-width: 20rem;
	min-width: var(--body-min-width);
	display: flex;
	flex-direction: column
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	min-width: 20rem;
	min-width: var(--body-min-width);
	display: flex;
	flex-direction: column
}

.page {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	max-width: var(--body-max-width);
	flex-grow: 1;
	transition: all .3s
}

.page {
	position: relative;
	z-index: 2;
	box-sizing: border-box
}

.section {
	position: relative;
	z-index: 2;
	box-sizing: border-box
}

.section {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column
}

.container {
	max-width: 90rem;
	max-width: calc(var(--container-width) + var(--margin)*4);
	width: 100%;
	min-width: 0;
	padding-right: 1.25rem;
	padding-right: calc(var(--margin)*2);
	padding-left: 1.25rem;
	padding-left: calc(var(--margin)*2);
	position: relative;
	z-index: 2;
	box-sizing: border-box
}

.spacer {
	flex-grow: 1;
	min-height: 12.5rem
}

.decline {
	height: .125rem;
	background-color: #626262;
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 12.5rem, #000 calc(100% - 12.5rem), transparent);
	mask: linear-gradient(90deg, transparent 0, #000 12.5rem, #000 calc(100% - 12.5rem), transparent)
}

.decline_pos_top {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px
}

.link {
	text-decoration: underline;
	color: currentColor
}

.link:hover {
	text-decoration: none
}

[data-tab] {
	display: none;
	transition: all .3s;
	opacity: 0;
	-webkit-animation: tab 1s ease forwards;
	animation: tab 1s ease forwards
}

@-webkit-keyframes tab {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes tab {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

[type=button] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=color] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=date] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=datetime-local] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=email] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=file] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=image] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=month] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=number] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=password] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=reset] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=search] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=tel] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=text] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=time] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=url] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

[type=week] {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

select {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

textarea {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-width);
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-padding);
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

textarea {
	height: 4.375rem;
	resize: none;
	max-height: 4.375rem;
	text-align: left;
	padding: .3125rem .625rem;
	line-height: 1.125rem;
	line-height: calc(var(--input-font-size) + .125rem)
}

textarea:focus {
	height: auto;
	max-height: none;
	resize: vertical
}

[type=button]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=color]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=date]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=datetime-local]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=email]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=file]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=image]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=month]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=number]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=password]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=reset]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=search]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=tel]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=text]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=time]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=url]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

[type=week]:focus {
	box-sizing: border-box;
	transition: none;
	width: auto;
	width: var(--input-focus-width);
	height: 3.125rem;
	height: var(--input-focus-height);
	background-color: #18130d;
	background-color: var(--input-focus-bg);
	border: 1px solid #482e1e;
	border: var(--input-focus-border);
	border-radius: .625rem;
	border-radius: var(--input-focus-border-radius);
	padding: .1875rem .625rem;
	padding: var(--input-focus-padding);
	color: #ffba70;
	color: var(--input-focus-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-focus-font-family);
	font-size: 1rem;
	font-size: var(--input-focus-font-size);
	line-height: 1rem;
	line-height: var(--input-focus-font-size);
	font-weight: 400;
	font-weight: var(--input-focus-font-weight);
	text-align: left;
	text-align: var(--input-focus-text-align);
	outline: none;
	outline: var(--input-focus-outline);
	box-shadow: none;
	box-shadow: var(--input-focus-box-shadow);
	min-width: 0
}

option {
	background-color: #482e1e;
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left
}

option:hover {
	color: #000;
	background-color: #313131
}

.checkbox {
	display: flex;
	align-items: flex-start;
	font-size: 1rem;
	line-height: 1;
	color: #fff
}

.field {
	position: relative;
	z-index: 0;
	width: 100%;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	transition: none;
	height: 3.125rem;
	height: var(--input-height);
	background-color: #18130d;
	background-color: var(--input-bg);
	border: 1px solid #482e1e;
	border: var(--input-border);
	border-radius: .625rem;
	border-radius: var(--input-border-radius);
	padding: 0;
	color: #ffba70;
	color: var(--input-color);
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--input-font-family);
	font-size: 1rem;
	font-size: var(--input-font-size);
	line-height: 1rem;
	line-height: var(--input-font-size);
	font-weight: 400;
	font-weight: var(--input-font-weight);
	text-align: left;
	text-align: var(--input-text-align);
	outline: none;
	outline: var(--input-outline);
	box-shadow: none;
	box-shadow: var(--input-box-shadow);
	min-width: 0
}

.selection {
	padding-left: 0;
	padding-right: 2.25rem;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent url(../images/selection-arrow-down.svg) no-repeat calc(100% - .3125rem) 50%;
	font-size: 1.5rem;
	line-height: 1;
	font-family: var(--font-primary)
}

:root {
	--btn-w: 12.5rem;
	--btn-h: 3.125rem;
	--btn-fs: 1rem;
	--btn-scale: 1;
	--btn-img-url: url(../images/btn/btn.png);
	--btn-letter-spacing: 0
}

.points {
	display: none
}

.gw-modal-close {
	display: none
}

.fancybox-is-open .mdl_animated {
	-webkit-animation: modalIn .5s ease;
	animation: modalIn .5s ease
}

.fancybox-is-closing .mdl_animated {
	-webkit-animation: modalout .5s ease;
	animation: modalout .5s ease
}

@-webkit-keyframes modalIn {
	0% {
		opacity: 0;
		transform: scale(1.2)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes modalIn {
	0% {
		opacity: 0;
		transform: scale(1.2)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@-webkit-keyframes modalout {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	to {
		opacity: 0;
		transform: scale(.8)
	}
}

@keyframes modalout {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	to {
		opacity: 0;
		transform: scale(.8)
	}
}

[data-section=hero] {
	background-color: transparent;
	background-image: url(../images/hero/l2age-bg1.jpg);
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat
}

[data-container=hero] {
	max-width: 52.5rem;
	max-width: calc(50rem + var(--margin)*4)
}

.hero {
	min-height: 100vh;
	box-sizing: border-box;
	padding-top: 8.75rem;
	padding-bottom: 5rem;
	transition: none;
	justify-content: center
}

.hero {
	display: flex;
	align-items: center;
	flex-direction: column
}

.hero__box {
	display: flex;
	align-items: center;
	flex-direction: column
}

.hero__box {
	justify-content: center;
	text-align: center;
	max-width: 31.25rem;
	width: 100%
}

.hero__logotype {
	margin-bottom: 1.5625rem
}

.hero__title {
	color: #ffba70;
	color: rgba(var(--color-accent), 1);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.1;
	text-shadow: 0 .125rem .125rem #000
}

.hero__subtitle {
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--font-4)
}

.hero__title {
	font-family: Spectral, Times New Roman, Times, serif;
	font-family: var(--font-4)
}

.hero__subtitle {
	color: rgba(255, 233, 211, .7);
	color: rgba(var(--color-0), .7);
	font-size: 1rem;
	font-weight: 400;
	margin: 1.25rem 0 0;
	line-height: 1.3
}

.hero__btns {
	margin-top: 2.5rem
}

.post {
	--size-title: 1.125rem;
	--size-desc: 0.875rem;
	--size-date: 0.75rem;
	--size-status: 0.875rem;
	--desc-max-height: 4.125rem;
	--line-clamp: 5;
	position: relative;
	z-index: 0;
	overflow: hidden;
	box-sizing: border-box;
	padding: 5rem 1.875rem 1.875rem;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-height: 21.875rem;
	background-color: #12110f;
	color: #ffe9d3;
	color: rgba(var(--color-0), 1);
	border-radius: .3125rem;
	border-radius: var(--border-radius);
	border: 1px solid rgba(255, 178, 111, .14);
	border: var(--border)
}

.post:after {
	display: block;
	content: "";
	background: linear-gradient(0deg, rgba(19, 9, 3, .96) 20%, rgba(37, 33, 33, 0) 80%);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1
}

.post__link {
	z-index: 5;
	display: block
}

.post__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	transition: all .3s;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.post:hover .post__bg {
	transform: scale(1.1)
}

.post__date {
	position: absolute;
	top: 2rem;
	left: 1.875rem;
	color: #fff;
	color: rgba(var(--color-1), 1);
	text-shadow: 0 .125rem .25rem #000;
	white-space: nowrap;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: var(--size-date);
	grid-gap: .625rem;
	gap: .625rem;
	margin-bottom: .75rem
}

.post__date-ico {
	position: relative;
	top: -1px
}

.post__container {
	margin-top: auto;
	max-width: 37.5rem
}

.post__title {
	color: #ffba70;
	color: rgba(var(--color-accent), 1);
	font-size: var(--size-title);
	font-weight: 700;
	margin: 0
}

.post__desc {
	color: hsla(0, 0%, 100%, .7);
	color: rgba(var(--color-1), .7);
	font-size: var(--size-desc);
	line-height: 1.6;
	font-weight: 400;
	margin-top: .75rem;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: var(--line-clamp);
	-webkit-line-clamp: var(--line-clamp);
	overflow: hidden
}

/* Ranking Styles */

.post--ranking {
	padding: 1.75rem;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45)
}

.post--ranking .post__header {
	margin-bottom: 1.75rem;
	text-align: center
}

.post--ranking .post__title {
	font-size: 1.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffe9d3
}

.post--ranking .post__subtitle {
	font-size: 0.8rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255, 233, 211, 0.55)
}

.post--ranking .post__ranking {
	display: flex;
	flex-direction: column;
	gap: 0.75rem
}

.ranking-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.5rem
}

.ranking-column {
	display: flex;
	flex-direction: column;
	gap: 0.3rem
}

.ranking-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.85rem;
	background: rgba(5, 5, 12, 0.7);
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden
}

.ranking-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--rank-progress, 0%);
	background: linear-gradient(90deg, rgba(255, 186, 112, 0.15), rgba(255, 186, 112, 0));
	opacity: 0.8
}

.ranking-item>* {
	position: relative;
	z-index: 1
}

.ranking-position {
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	text-align: center
}

.rank-gold {
	background: linear-gradient(135deg, #ffd700, #ffae00);
	color: #2b1d00
}

.rank-silver {
	background: linear-gradient(135deg, #f3f3f3, #a7b1bd);
	color: #0f1a24
}

.rank-bronze {
	background: linear-gradient(135deg, #f6b36d, #b56a32);
	color: #2b0f05
}

.rank-default {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.65)
}

.ranking-content {
	display: flex;
	flex-direction: column;
	min-width: 0
}

.ranking-name {
	font-size: 1rem;
	font-weight: 600;
	color: #ffe9d3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ranking-meta {
	font-size: 0.65rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255, 233, 211, 0.5)
}

.ranking-score {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem
}

.ranking-score>.ranking-separator {
	align-self: center
}

.ranking-stat {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	line-height: 1.1
}

.ranking-stat--secondary .ranking-value {
	color: rgba(255, 233, 211, 0.85)
}

.ranking-separator {
	font-size: 0.8rem;
	color: rgba(255, 233, 211, 0.35)
}

.ranking-value {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffba70;
	line-height: 1
}

.ranking-label {
	font-size: 0.6rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255, 233, 211, 0.55)
}

.ranking-empty {
	text-align: center;
	padding: 2rem;
	color: rgba(255, 233, 211, 0.65);
	font-size: 0.95rem;
	border: 1px dashed rgba(255, 233, 211, 0.25);
	border-radius: 1rem
}

.ranking-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
	margin-top: 1.25rem
}

.ranking-action {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.1rem 0 0 0;
	border-radius: 0.65rem;
	border: 1px solid rgba(255, 233, 211, 0.2);
	background: rgba(255, 233, 211, 0.08);
	color: #ffe9d3;
	font-family: var(--font-4, 'Inter', sans-serif);
	font-size: 0.85rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: all 0.2s ease;
	text-align: center;
	min-height: 2.5rem;
	box-shadow: inset 0 0 0 0 rgba(255, 186, 112, 0.8)
}

.ranking-action:hover,
.ranking-action:focus-visible {
	color: #1c1208;
	background: rgba(255, 186, 112, 0.9);
	border-color: rgba(255, 186, 112, 1);
	box-shadow: 0 0.75rem 1.5rem rgba(255, 186, 112, 0.25);
	transform: translateY(-2px);
	outline: none
}

@media (max-width: 1199px) {
	.ranking-actions {
		grid-template-columns: 1fr;
	}
}

.post__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	text-decoration: none
}

.post__status {
	position: absolute;
	right: 1.875rem;
	top: 1.5rem;
	background-color: rgba(0, 0, 0, .63);
	font-size: var(--size-status);
	color: #ffba70;
	color: rgba(var(--color-accent), 1);
	padding: .5rem 1.25rem;
	border-radius: .875rem
}

[data-section=news] {
	background-color: transparent;
	background-image: url(../images/news/bg.jpg);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat
}

.news {
	box-sizing: border-box;
	/* min-height: 100vh; */
	padding-top: 6.25rem;
	padding-bottom: 6.25rem
}

.news.topservers {
	min-height: auto !important
}

.news__heading {
	margin-bottom: 3.125rem
}

.news__wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 0;
	margin: 0 auto;
	max-width: 25rem
}

.news__list {
	width: 100%;
	overflow: hidden;
	border-radius: .3125rem;
	border-radius: var(--border-radius)
}

.news__swiper-wrapper {
	display: flex;
	align-items: stretch
}

[data-news-post] {
	-webkit-animation: post 1s ease forwards;
	animation: post 1s ease forwards
}

.news__swiper-slide {
	height: auto;
	display: flex
}

.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	box-sizing: border-box;
	color: #ffe9d3;
	color: rgba(var(--color-0), 1)
}

.static {
	box-sizing: border-box;
	padding-top: 6.25rem;
	padding-bottom: 6.25rem
}

.static__heading {
	margin-bottom: 2.5rem
}

.stream {
	height: 15rem;
	display: flex;
	color: hsla(0, 0%, 84.3%, .5);
	font-size: 1rem;
	font-weight: 400;
	cursor: default;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	z-index: 0;
	width: 100%;
	padding: 0;
	border-radius: .3125rem;
	border-radius: var(--border-radius);
	border: 1px solid rgba(255, 186, 112, .5);
	border: 1px solid rgba(var(--color-accent), .5);
	box-shadow: inset 0 0 3.125rem rgba(0, 0, 0, .35);
	background-color: rgba(41, 27, 20, .8);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat
}

.stream iframe {
	width: 100%;
	height: 100%
}

.stream__content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	width: 100%;
	color: #ffe9d3;
	color: rgba(var(--color-0), 1);
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	font-family: Philosopher, Open Sans, Tahoma, Arial, sans-serif;
	font-family: var(--font-1)
}

.stream__ico {
	display: inline-block;
	font-size: 2.5rem
}

.stream__desc {
	margin-top: .625rem;
	margin-bottom: .625rem
}

.stream__link {
	text-decoration: none;
	color: #ffba70;
	color: rgba(var(--color-accent), 1);
	transition: all .2s
}

.stream__link:hover {
	color: #ff8f17;
	color: rgba(var(--color-accent-hover), 1)
}

[data-section=streams] {
	background-color: transparent;
	background-image: url(../images/streams/bg.jpg);
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat
}

.streams {
	box-sizing: border-box;
	/* min-height: 100vh; */
	padding-top: 6.25rem;
	padding-bottom: 6.25rem
}

.streams__heading {
	margin-bottom: 3.125rem
}

.streams__wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 0;
	margin: 0 auto;
	max-width: 31.25rem
}

.streams__list {
	overflow: hidden;
	width: 100%;
	min-width: 0;
	border-radius: .3125rem;
	border-radius: var(--border-radius)
}

.streams__swiper-slide {
	display: grid
}

.streams__stream {
	width: calc(100% - 1.25rem);
	margin: .625rem
}

[data-section=aboutus] {
	background-color: transparent;
	background-image: url(../images/aboutus/bg.jpg);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat
}

.aboutus {
	box-sizing: border-box;
	padding-top: 6.25rem;
	padding-bottom: 6.25rem;
	display: flex;
	flex-direction: column
}

.aboutus__container {
	display: grid;
	grid-gap: 3.125rem
}

.aboutus__content {
	font-size: 1rem
}

.aboutus__madia {
	height: 25rem;
	overflow: hidden;
	display: none;
	text-decoration: none;
	margin: 0 auto;
	background-color: #12110f;
	border-radius: .3125rem;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	border: 1px solid rgba(255, 178, 111, .14);
	border: var(--border)
}

.aboutus__img {
	height: 100%;
	width: 100%;
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center top;
	object-position: center top
}

.protection {
	justify-content: flex-start;
	background-color: transparent;
	text-align: left
}

.protection {
	display: flex;
	align-items: center
}

@media (min-width:540px) {
	.mdl__inner {
		padding: 2.5rem 1.5rem
	}

	.navigation__box_side_left {
		grid-gap: 2rem;
		gap: 2rem
	}

	.hero__title {
		font-size: 2rem
	}
}

@media (min-width:720px) {
	.title {
		font-size: 3.125rem
	}

	.subtitle {
		font-size: 1.125rem
	}

	[data-section=hero] {
		background-position: top
	}

	.post {
		min-height: 28.125rem
	}

	.news__wrap {
		max-width: 62.5rem
	}

	.streams__wrap {
		max-width: 62.5rem
	}

	.aboutus__container {
		grid-template-columns: 18.75rem 1fr
	}

	.aboutus__madia {
		display: block
	}
}

@media (min-width:840px) {

	.static {
		padding-top: 12rem;
		/* padding-bottom: 18.75rem */
	}

	.static__heading {
		margin-bottom: 5.625rem
	}
}

@media (min-width:1050px) {
	.author {
		font-size: .875rem
	}

	.static__content {
		padding: 2.5rem
	}
}

@media (min-width:1200px) {
	.points {
		display: flex;
		position: fixed;
		right: 3.125rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		list-style-type: none;
		padding: 0;
		margin: 0;
		left: auto;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box
	}

	.points:hover .points__overlay {
		opacity: 1;
		visibility: visible
	}

	.point {
		justify-content: flex-start;
		align-items: center;
		font-size: 1.0625rem;
		color: #4a3523;
		font-family: Spectral, Times New Roman, Times, serif;
		font-family: var(--font-0);
		cursor: pointer;
		display: flex;
		position: relative;
		z-index: 0;
		margin: 0;
		opacity: .5;
		transition: all .2s
	}

	.point:hover {
		opacity: 1
	}

	.point_active {
		opacity: 1
	}

	.point__dot {
		width: 1.25rem;
		height: 1.25rem;
		flex-shrink: 0;
		transition: all .2s;
		position: relative;
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center
	}

	.point__dot:before {
		display: block;
		content: "";
		background-color: transparent;
		border: .1875rem solid #ac7b42;
		width: 1rem;
		height: 1rem;
		transition: all .2s;
		flex-shrink: 0;
		top: .125rem;
		left: .125rem;
		box-sizing: border-box;
		transform: rotate(45deg)
	}

	.point__dot:before {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -5;
		position: absolute
	}

	.point__line {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -5;
		position: absolute
	}

	.point__line {
		right: calc(100% - .125rem);
		top: calc(50% - 1px);
		background-color: #ac7b42;
		width: 2rem;
		height: .125rem
	}

	.point_active .point__dot:before {
		opacity: 1
	}

	.point_active:hover .point__dot:before {
		opacity: 1
	}

	.point__content {
		position: absolute;
		white-space: nowrap;
		transition: all .2s;
		transform-origin: right center;
		display: block;
		bottom: auto;
		right: 4.625rem;
		top: calc(50% - 1.625rem);
		box-sizing: border-box;
		padding-left: 1.25rem;
		text-align: right;
		line-height: 1.2;
		visibility: hidden;
		opacity: 0;
		opacity: 1;
		visibility: visible
	}

	.points:hover .point__content {
		opacity: 1;
		visibility: visible
	}

	.point:hover .point__content {
		visibility: visible
	}

	.point__title {
		color: #d3a168;
		font-size: 1.375rem;
		font-weight: 400
	}

	.point__desc {
		color: #966f44;
		font-size: .875rem;
		font-weight: 400
	}

	.point__devider {
		display: block;
		width: .125rem;
		height: 3rem;
		background-color: #ac7b42;
		opacity: .5;
		margin: .375rem 0
	}

	.point__devider_pos_start {
		-webkit-mask: linear-gradient(180deg, transparent 0, #000);
		mask: linear-gradient(180deg, transparent 0, #000)
	}

	.point__devider_pos_end {
		-webkit-mask: linear-gradient(0deg, transparent 0, #000);
		mask: linear-gradient(0deg, transparent 0, #000)
	}

	[data-section=hero] {
		background-image: url(../images/hero/l2age-bg1-ultra.jpg)
	}

	[data-container=hero] {
		max-width: 85rem;
		max-width: calc(82.5rem + var(--margin)*4)
	}

	.hero {
		padding-top: 7.25rem;
		padding-bottom: 5.25rem;
		align-items: flex-start
	}

	.hero__box {
		max-width: 50rem
	}

	.hero__title {
		font-size: 3rem
	}

	.hero__subtitle {
		font-size: 1.25rem;
		line-height: 1.5
	}

	.post {
		min-height: 34.375rem;
		--size-title: 1.375rem;
		--size-desc: 1rem;
		--size-date: 0.875rem;
		--size-status: 1rem
	}

	.news {
		padding-top: 12.5rem;
		padding-bottom: 6.25rem
	}

	.news__wrap {
		max-width: none
	}

	.news__list {
		padding-bottom: 0
	}

	[data-section=footer] {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3
	}

	.streams {
		padding-top: 12.5rem;
		padding-bottom: 6.25rem
	}

	.streams__wrap {
		max-width: 75rem
	}

	.aboutus {
		padding-top: 9.375rem;
	}

	.aboutus__container {
		min-height: 0;
		overflow: hidden;
		grid-template-columns: 25rem 1fr;
		grid-gap: 3.75rem;
		height: 31.25rem
	}

	.aboutus__content {
		font-size: 1.125rem
	}

	.aboutus__madia {
		height: 100%
	}
}

@media (min-width:1200px) AND (min-height:750px) {
	.section-slider-active {
		overflow: hidden;
		margin: 0 !important
	}

	.section-slider-active body {
		margin: 0 !important
	}
}

@media (min-width:1350px) {
	.streams__list {
		margin: 0 auto
	}
}

@media (min-width:2600px) AND (max-height:1100px) {
	.section-slider-active {
		overflow: auto
	}
}

@media (max-width:1199px) {
	.section[data-section="hero"] {
		position: relative
	}

	.hero {
		padding-top: calc(var(--navigation-height, 4.375rem) + 11rem)
	}

	a[data-menu-open-sub-list].menu__item_open .menu__item-arrow {
		transform: rotate(180deg)
	}
}

.category-body {
	background-color: #12110f;
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow)
}

.category-section {
	background-color: #12110f;
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow)
}

.category-empty {
	background-color: #12110f;
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow)
}

.category-body {
	margin-top: 1.75rem;
	padding: 1.75rem
}

.category-section {
	margin-top: 1.75rem;
	padding: 1.75rem
}

.category-empty {
	margin-top: 1.75rem;
	padding: 1.75rem
}

.category-section {
	display: flex;
	flex-direction: column;
	gap: 1.5rem
}

.category-section__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem
}

.category-section__title {
	margin: 0;
	font-size: 1.625rem;
	color: rgba(var(--color-accent), 1);
	font-weight: 700
}

.category-section__subtitle {
	margin: 0;
	color: rgba(var(--color-0), .65);
	font-size: 0.95rem
}

.category-section__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))
}

.category-subcard {
	height: 100%;
	background-color: rgba(10, 8, 6, .65);
	border: var(--border);
	border-radius: var(--border-radius);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.category-subcard__link {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
	color: rgba(var(--color-1), 1);
	text-decoration: none
}

.category-subcard__header {
	display: flex;
	align-items: center;
	gap: 0.75rem
}

.category-subcard__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: rgba(var(--color-1), 1)
}

.category-subcard__description {
	margin: 0;
	color: rgba(var(--color-0), .7);
	font-size: 0.95rem;
	line-height: 1.5
}

.category-subcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.85rem;
	color: rgba(var(--color-0), .6)
}

.category-subcard:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .4);
	border-color: rgba(var(--color-accent), .45)
}

.category-content-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))
}

.category-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: rgba(10, 8, 6, .7);
	border: var(--border);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.category-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: rgba(var(--color-1), 1);
	text-decoration: none
}

.category-post-card__image {
	position: relative;
	width: 100%;
	overflow: hidden
}

.category-post-card__image img {
	display: block;
	width: 100%;
	height: 12.5rem;
	-o-object-fit: cover;
	object-fit: cover
}

.category-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.5rem
}

.category-post-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: rgba(var(--color-accent), 1)
}

.category-post-card__excerpt {
	margin: 0;
	color: rgba(var(--color-0), .72);
	font-size: 0.95rem;
	line-height: 1.55
}

.category-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.85rem;
	color: rgba(var(--color-0), .6)
}

.category-post-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .4);
	border-color: rgba(var(--color-accent), .45)
}

.category-empty {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-align: center
}

.category-empty__message {
	margin: 0;
	font-size: 1.1rem;
	color: rgba(var(--color-0), .85)
}

.category-empty__hint {
	margin: 0;
	color: rgba(var(--color-0), .6)
}

@media (min-width: 48rem) {
	.category-section__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between
	}
}

/* Loading Spinner Animation */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ================================
   L2Wiki Header - Chronicle Tabs
   ================================ */
.l2wiki-header {
	margin-bottom: 2rem;
}

.l2wiki-chronicle-tabs {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.chronicle-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: rgba(15, 15, 15, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
}

.chronicle-tab i {
	font-size: 1.1rem;
	color: rgba(var(--color-accent), 0.7);
	transition: color 0.3s ease;
}

.chronicle-tab:hover {
	background: rgba(var(--color-accent), 0.15);
	border-color: rgba(var(--color-accent), 0.4);
	color: #fff;
}

.chronicle-tab:hover i {
	color: rgba(var(--color-accent), 1);
}

.chronicle-tab.active,
.chronicle-tab.selected {
	background: rgba(var(--color-accent), 0.2);
	border-color: rgba(var(--color-accent), 0.6);
	color: #fff;
	cursor: default;
}

.chronicle-tab.active i,
.chronicle-tab.selected i {
	color: rgba(var(--color-accent), 1);
}

/* Shake animation for error */
.l2wiki-chronicle-tabs.shake {
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-5px);
	}

	40%,
	80% {
		transform: translateX(5px);
	}
}

/* Chronicle selection hint */
.chronicle-select-hint {
	margin-top: 0.75rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
}

.chronicle-select-hint i {
	font-size: 1rem;
}

.chronicle-select-hint.error {
	color: #ef4444;
	font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.l2wiki-chronicle-tabs {
		gap: 0.5rem;
	}

	.chronicle-tab {
		padding: 0.6rem 1rem;
		font-size: 0.8rem;
	}

	.chronicle-tab span {
		display: none;
	}

	.chronicle-tab i {
		font-size: 1.25rem;
	}
}

/* ================================
   L2Wiki Categories Grid Styles
   ================================ */
.l2wiki-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.l2wiki-category-card {
	background: rgba(15, 15, 15, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.l2wiki-category-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(var(--color-accent), 0.08), rgba(var(--color-accent-hover), 0.08));
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.l2wiki-category-card:hover::before {
	opacity: 1;
}

.l2wiki-category-card:hover {
	border-color: rgba(var(--color-accent), 0.5);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(var(--color-accent), 0.2);
}

.category-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: rgba(var(--color-accent), 1);
	position: relative;
	z-index: 1;
}

.category-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.75rem;
	color: #fff;
	position: relative;
	z-index: 1;
}

.category-description {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.5rem;
	line-height: 1.6;
	position: relative;
	z-index: 1;
}

.category-link {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: rgba(var(--color-accent), 0.15);
	border: 1px solid rgba(var(--color-accent), 0.3);
	border-radius: 6px;
	color: rgba(var(--color-accent), 1);
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	cursor: not-allowed;
	opacity: 0.7;
}

.category-link:hover {
	background: rgba(var(--color-accent-hover), 0.2);
	border-color: rgba(var(--color-accent-hover), 0.5);
	color: rgba(var(--color-accent-hover), 1);
}

.l2wiki-info-section {
	background: rgba(15, 15, 15, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 2rem;
}

.l2wiki-info-section .section-title {
	font-size: 1.75rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
	color: #fff;
}

.l2wiki-info-section p {
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.8;
	font-size: 1.1rem;
}

@media (max-width: 768px) {
	.l2wiki-categories-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.l2wiki-category-card {
		padding: 1.5rem;
	}

	.category-icon {
		font-size: 2.5rem;
	}

	.category-title {
		font-size: 1.25rem;
	}
}

/* ================================
   L2Wiki Chronicle Pages Styles
   ================================ */

/* Search Section */
.l2wiki-search-section {
	margin-bottom: 2rem;
}

.l2wiki-search-form {
	max-width: 600px;
	margin: 0 auto;
}

.search-input-wrapper {
	display: flex;
	gap: 0.5rem;
}

.l2wiki-search-input {
	flex: 1;
	padding: 0.875rem 1rem;
	font-size: 1rem;
	background: rgba(15, 15, 15, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	transition: all 0.3s ease;
}

.l2wiki-search-input:focus {
	outline: none;
	border-color: rgba(var(--color-accent), 0.6);
	box-shadow: 0 0 0 3px rgba(var(--color-accent), 0.1);
}

.l2wiki-search-btn {
	padding: 0.875rem 1.5rem;
	background: rgba(var(--color-accent), 0.2);
	border: 1px solid rgba(var(--color-accent), 0.4);
	border-radius: 8px;
	color: rgba(var(--color-accent), 1);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.l2wiki-search-btn:hover {
	background: rgba(var(--color-accent), 0.3);
	border-color: rgba(var(--color-accent), 0.6);
}

.search-hint {
	margin-top: 0.75rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.875rem;
}

/* Quick Links */
.l2wiki-quick-links {
	margin-top: 2rem;
}

.quick-links-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.quick-link-card {
	background: rgba(15, 15, 15, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 1.25rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 0.5;
}

.quick-link-card i {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	display: block;
	color: rgba(var(--color-accent), 1);
}

.quick-link-card span {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
}

/* Search Results */
.search-results-summary {
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
}

.search-results-section {
	margin-bottom: 2.5rem;
}

.section-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.section-title .count {
	color: rgba(255, 255, 255, 0.5);
	font-weight: normal;
}

/* L2Wiki Tables */
.drops-table-wrapper {
	overflow-x: auto;
}

.l2wiki-table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(15, 15, 15, 0.6);
	border-radius: 8px;
	overflow: hidden;
}

.l2wiki-table thead {
	background: rgba(0, 0, 0, 0.4);
}

.l2wiki-table th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.l2wiki-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.9);
}

.l2wiki-table tbody tr:hover {
	background: rgba(var(--color-accent), 0.05);
}

.l2wiki-table .col-icon {
	width: 40px;
	text-align: center;
}

.item-icon-small {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 4px;
}

.id-col {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.8rem;
}

/* Item Links with Grades */
.item-link {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.2s ease;
}

.item-link:hover {
	color: rgba(var(--color-accent), 1);
}

/* Grade Colors */
.grade-d,
.item-link.grade-d {
	color: #9e9e9e;
}

.grade-c,
.item-link.grade-c {
	color: #4fc3f7;
}

.grade-b,
.item-link.grade-b {
	color: #81c784;
}

.grade-a,
.item-link.grade-a {
	color: #ba68c8;
}

.grade-s,
.item-link.grade-s {
	color: #ffb74d;
}

.grade-s80,
.item-link.grade-s80 {
	color: #ff8a65;
}

.grade-s84,
.item-link.grade-s84 {
	color: #ff7043;
}

.grade-r,
.item-link.grade-r {
	color: #ef5350;
}

.grade-r95,
.item-link.grade-r95 {
	color: #e53935;
}

.grade-r99,
.item-link.grade-r99 {
	color: #c62828;
}

.grade-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
}

.grade-badge.grade-d {
	background: rgba(158, 158, 158, 0.2);
}

.grade-badge.grade-c {
	background: rgba(79, 195, 247, 0.2);
}

.grade-badge.grade-b {
	background: rgba(129, 199, 132, 0.2);
}

.grade-badge.grade-a {
	background: rgba(186, 104, 200, 0.2);
}

.grade-badge.grade-s {
	background: rgba(255, 183, 77, 0.2);
}

.grade-badge.grade-s80 {
	background: rgba(255, 138, 101, 0.2);
}

.grade-badge.grade-s84 {
	background: rgba(255, 112, 67, 0.2);
}

.grade-badge.grade-r {
	background: rgba(239, 83, 80, 0.2);
}

.grade-badge.grade-r95 {
	background: rgba(229, 57, 53, 0.2);
}

.grade-badge.grade-r99 {
	background: rgba(198, 40, 40, 0.2);
}

/* NPC Links */
.npc-link {
	text-decoration: none;
	transition: color 0.2s ease;
}

.npc-link.passive {
	color: #81c784;
}

.npc-link.aggressive {
	color: #ef5350;
}

.npc-link:hover {
	color: rgba(var(--color-accent), 1);
}

.npc-title-small {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
	margin-left: 0.5rem;
}

/* Aggro Badge */
.aggro-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
}

.aggro-badge.passive {
	background: rgba(129, 199, 132, 0.2);
	color: #81c784;
}

.aggro-badge.aggressive {
	background: rgba(239, 83, 80, 0.2);
	color: #ef5350;
}

/* Chance Display */
.chance {
	font-weight: 500;
}

.chance.high {
	color: #81c784;
}

.chance.medium {
	color: #ffb74d;
}

.chance.low {
	color: #ef5350;
}

/* Detail Card */
.l2wiki-detail-card {
	background: rgba(15, 15, 15, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.detail-header {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.detail-icon {
	width: 64px;
	height: 64px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.detail-icon.grade-d {
	border-color: rgba(158, 158, 158, 0.4);
}

.detail-icon.grade-c {
	border-color: rgba(79, 195, 247, 0.4);
}

.detail-icon.grade-b {
	border-color: rgba(129, 199, 132, 0.4);
}

.detail-icon.grade-a {
	border-color: rgba(186, 104, 200, 0.4);
}

.detail-icon.grade-s {
	border-color: rgba(255, 183, 77, 0.4);
}

.detail-icon.grade-s80 {
	border-color: rgba(255, 138, 101, 0.4);
}

.detail-icon.grade-s84 {
	border-color: rgba(255, 112, 67, 0.4);
}

.detail-icon.grade-r {
	border-color: rgba(239, 83, 80, 0.4);
}

.detail-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.5rem;
}

.detail-title.aggressive {
	color: #ef5350;
}

.detail-title.passive {
	color: #81c784;
}

.npc-title {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.meta-tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}

.meta-tag.aggressive {
	background: rgba(239, 83, 80, 0.2);
	color: #ef5350;
}

.meta-tag.passive {
	background: rgba(129, 199, 132, 0.2);
	color: #81c784;
}

/* Stats Grid */
.detail-stats {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
}

.stats-title {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 1rem;
}

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

.stats-grid-large {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.stats-group {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 1rem;
}

.stats-group-title {
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(var(--color-accent), 1);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.375rem 0;
}

.stat-label {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
}

.stat-value {
	color: #fff;
	font-weight: 600;
}

.stat-value.hp {
	color: #ef5350;
}

.stat-value.mp {
	color: #42a5f5;
}

.stat-value.exp {
	color: #ffb74d;
}

.stat-value.sp {
	color: #81c784;
}

/* Item Flags */
.item-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.flag {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
}

.flag.stackable {
	background: rgba(129, 199, 132, 0.2);
	color: #81c784;
}

.flag.no-trade,
.flag.no-drop,
.flag.no-sell {
	background: rgba(239, 83, 80, 0.2);
	color: #ef5350;
}

/* Drops Section */
.l2wiki-drops-section {
	margin-top: 2rem;
}

.drops-category {
	margin-bottom: 2rem;
}

.category-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.category-title.drop-grouped {
	color: #ffb74d;
}

.category-title.drop-single {
	color: #81c784;
}

.category-title.spoil {
	color: #ba68c8;
}

.category-title.herb {
	color: #4fc3f7;
}

.category-title .count {
	color: rgba(255, 255, 255, 0.5);
	font-weight: normal;
	font-size: 0.9rem;
}

/* Skills Section */
.l2wiki-skills-section {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

.skill-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: rgba(15, 15, 15, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 0.75rem;
}

.skill-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.skill-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.skill-name {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.85rem;
}

/* Empty State */
.l2wiki-empty-state {
	text-align: center;
	padding: 3rem 2rem;
	background: rgba(15, 15, 15, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.l2wiki-empty-state i {
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.3);
	margin-bottom: 1rem;
	display: block;
}

.l2wiki-empty-state p {
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.5rem;
}

.l2wiki-empty-state .hint {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
	.search-input-wrapper {
		flex-direction: column;
	}

	.l2wiki-search-btn {
		width: 100%;
		justify-content: center;
	}

	.quick-links-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.detail-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.detail-meta {
		justify-content: center;
	}

	.stats-grid,
	.stats-grid-large {
		grid-template-columns: 1fr;
	}

	.l2wiki-table th,
	.l2wiki-table td {
		padding: 0.5rem;
		font-size: 0.85rem;
	}

	.item-icon-small {
		width: 24px;
		height: 24px;
	}

	.skills-grid {
		grid-template-columns: 1fr;
	}
}

/* Document Content Styles (Added by AI) */
.doc-content {
	color: #e6d5c8;
	font-size: 1rem;
	line-height: 1.6;
}

.doc-content h1,
.doc-content h2,
.doc-content h3 {
	font-family: var(--font-4, serif);
	color: rgba(var(--color-accent), 1);
	margin-top: 1.5em;
	margin-bottom: 0.75em;
}

.doc-content h1 {
	font-size: 2em;
	border-bottom: 1px solid rgba(255, 186, 112, 0.2);
	padding-bottom: 0.5em;
}

.doc-content h2 {
	font-size: 1.5em;
}

.doc-content h3 {
	font-size: 1.25em;
}

.doc-content p {
	margin-bottom: 1em;
}

.doc-content .rule-block {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(255, 186, 112, 0.12);
}

.doc-content h3+.rule-block {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.doc-content .highlight-warning {
	color: rgba(var(--color-accent), 1);
	font-weight: bold;
}

.doc-content strong {
	color: #e8c9a8;
	font-weight: 600;
}

.doc-content ul,
.doc-content ol {
	margin-bottom: 1em;
	padding-left: 1.5em;
}

.doc-content li {
	margin-bottom: 0.5em;
}

.doc-content .highlight-box {
	background: rgba(255, 186, 112, 0.05);
	border: 1px solid rgba(255, 186, 112, 0.1);
	padding: 1em;
	border-radius: 4px;
	margin: 1em 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOWNLOADS PAGE - Immersive download hub
   ═══════════════════════════════════════════════════════════════════════════ */

.downloads-page {
	padding: 2.5rem 0 3.5rem;
	position: relative;
	overflow: hidden;
}

.downloads-page::before,
.downloads-page::after {
	content: "";
	position: absolute;
	width: 32rem;
	height: 32rem;
	background: radial-gradient(circle, rgba(var(--color-accent), 0.12), transparent 55%);
	filter: blur(10px);
	opacity: 0.8;
	pointer-events: none;
}

.downloads-page::before {
	top: -12rem;
	left: -8rem;
}

.downloads-page::after {
	right: -14rem;
	bottom: -10rem;
}

/* Grid Layout - responsive auto-fit cards */
.downloads-page>.row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.5rem;
	margin-bottom: 1.75rem;
	align-items: stretch;
	padding: 0;
}

.downloads-page>.row:last-child {
	margin-bottom: 0;
}

.downloads-page>.row>.col-md-6 {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	flex: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Download Box - hero cards
   ───────────────────────────────────────────────────────────────────────────── */
.download-box {
	background: linear-gradient(165deg, rgba(12, 9, 6, 0.94), rgba(24, 17, 11, 0.82));
	border: 1px solid rgba(var(--color-accent), 0.38);
	border-radius: 14px;
	height: 100%;
	position: relative;
	padding: 0;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.64), 0 1px 0 rgba(255, 186, 112, 0.14) inset;
	backdrop-filter: saturate(150%) blur(1px);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.download-box::before {
	content: "";
	position: absolute;
	inset: 1px;
	background: linear-gradient(200deg, rgba(var(--color-accent), 0.05), rgba(var(--color-accent), 0));
	opacity: 0.7;
	pointer-events: none;
	border-radius: 12px;
}

.download-box::after {
	content: "";
	position: absolute;
	top: -0.6rem;
	right: -0.6rem;
	width: 5rem;
	height: 5rem;
	background: radial-gradient(circle, rgba(var(--color-accent), 0.16), transparent 60%);
	filter: blur(6px);
	pointer-events: none;
}

.download-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 186, 112, 0.22) inset;
	border-color: rgba(var(--color-accent), 0.52);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Box Title - Header with accent background
   ───────────────────────────────────────────────────────────────────────────── */
.download-box .box-title {
	background: linear-gradient(180deg, rgba(var(--color-accent), 0.16) 0%, rgba(var(--color-accent), 0.06) 100%);
	border-bottom: 1px solid rgba(var(--color-accent), 0.22);
	padding: 1.05rem 1.4rem;
	margin: 0;
	font-family: var(--font-4, serif);
	font-size: 1.18rem;
	font-weight: 700;
	color: rgba(var(--color-accent), 1);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	position: relative;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	box-shadow: 0 1px 0 rgba(255, 186, 112, 0.12) inset;
}

.download-box .box-title i {
	font-size: 1.15rem;
	opacity: 0.92;
}

.download-box .box-title::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--color-accent), 0.42), transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Box Content
   ───────────────────────────────────────────────────────────────────────────── */
.download-box .box-content {
	padding: 1.45rem;
	position: relative;
}

.download-box .box-content::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 45%);
	opacity: 0.4;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Steps - timeline style
   ───────────────────────────────────────────────────────────────────────────── */
.download-box .step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 1.25rem;
	padding: 0 0 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(var(--color-accent), 0.08);
	position: relative;
}

.download-box .step::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.35rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 2px solid rgba(var(--color-accent), 0.9);
	box-shadow: 0 0 0 6px rgba(var(--color-accent), 0.12);
}

.download-box .step::after {
	content: "";
	position: absolute;
	left: 0.4rem;
	top: 1.1rem;
	bottom: -1.25rem;
	width: 1px;
	background: linear-gradient(180deg, rgba(var(--color-accent), 0.32), rgba(var(--color-accent), 0));
}

.download-box .step:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.download-box .step:last-child::after {
	display: none;
}

.download-box .step h4 {
	font-family: var(--font-4, serif);
	color: #f0d9b5;
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.download-box .step h4 i {
	color: rgba(var(--color-accent), 1);
	font-size: 0.92rem;
}

.download-box .step p {
	color: #c9b89d;
	line-height: 1.6;
	margin-bottom: 0.7rem;
	font-size: 0.92rem;
}

.download-box .step strong {
	color: #f9e8c8;
}

.download-box .step p:last-child {
	margin-bottom: 0;
}

.download-box .step>a.btn {
	align-self: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Download Items
   ───────────────────────────────────────────────────────────────────────────── */
.download-box .download-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1.1rem 1.25rem 1.1rem;
	border-bottom: 1px solid rgba(var(--color-accent), 0.08);
	position: relative;
	background: linear-gradient(120deg, rgba(255, 186, 112, 0.06), rgba(255, 186, 112, 0) 65%);
	border-radius: 8px;
}

.download-box .download-item:last-child {
	border-bottom: none;
}

.download-box .download-item h4 {
	font-family: var(--font-4, serif);
	color: #f0d9b5;
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.download-box .download-item h4 i {
	color: rgba(var(--color-accent), 1);
	font-size: 0.92rem;
}

.download-box .download-item p {
	color: #c9b89d;
	line-height: 1.6;
	margin-bottom: 0.7rem;
	font-size: 0.92rem;
}

.download-box .download-item .download-meta {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.82rem;
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.download-box .download-item>a.btn {
	align-self: center;
}

.download-box .download-item a[data-desc]::after {
	content: attr(data-desc);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.5rem;
	padding: 0.2rem 0.6rem;
	font-size: 0.78rem;
	color: #1b0f08;
	background: rgba(var(--color-accent), 0.9);
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ Items
   ───────────────────────────────────────────────────────────────────────────── */
.download-box .faq-item {
	padding: 0.95rem 1.05rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(var(--color-accent), 0.1);
	border-radius: 8px;
	margin-bottom: 0.9rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	position: relative;
}

.download-box .faq-item:last-child {
	margin-bottom: 0;
}

.download-box .faq-item h4 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: #f7e2c1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.download-box .faq-item p {
	margin: 0;
	color: #c9b89d;
	line-height: 1.55;
	font-size: 0.9rem;
}

.download-box .faq-item::before {
	content: "";
	position: absolute;
	left: -0.5rem;
	top: 0.9rem;
	height: 70%;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(var(--color-accent), 0.7), rgba(var(--color-accent), 0.2));
}

/* Button group helpers */
.download-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: center;
	margin-top: 0.35rem;
}

.download-actions .btn {
	margin: 0;
	white-space: normal;
}

.downloads-page .btn {
	font-weight: 800;
	letter-spacing: 0.015em;
	font-family: var(--font-4, 'Inter', sans-serif);
	padding-inline: 1.25rem;
	text-transform: uppercase;
}

.downloads-page .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
	filter: brightness(1.05);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive tweaks
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.downloads-page>.row {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.25rem;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 768px) {
	.download-box .box-title {
		font-size: 1.08rem;
		padding: 0.95rem 1.1rem;
	}

	.download-box .box-content {
		padding: 1.15rem 1.15rem;
	}

	.download-box .btn {
		width: 100%;
		justify-content: center;
		margin-right: 0;
	}
}

@media (max-width: 600px) {
	.downloads-page {
		padding: 1.3rem 0 1.6rem;
	}

	.download-box .download-item a[data-desc]::after {
		display: inline-block;
		margin-top: 0.35rem;
	}
}

/* ==========================================
   RANKING PAGE STYLES
   ========================================== */
.ranking-page {
	padding: 2rem 0;
}

.ranking-page .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.75rem;
	margin-bottom: 1.5rem;
}

.ranking-page .col-md-6 {
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0 0.75rem;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.ranking-page .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 1.5rem;
	}
}

.ranking-box {
	background: linear-gradient(165deg, rgba(12, 9, 6, 0.94), rgba(24, 17, 11, 0.82));
	border: 1px solid rgba(var(--color-accent), 0.38);
	border-radius: 14px;
	height: 100%;
	position: relative;
	padding: 0;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.64), 0 1px 0 rgba(255, 186, 112, 0.14) inset;
	backdrop-filter: saturate(150%) blur(1px);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	overflow: hidden;
}

.ranking-box::before {
	content: "";
	position: absolute;
	inset: 1px;
	background: linear-gradient(200deg, rgba(var(--color-accent), 0.05), rgba(var(--color-accent), 0));
	opacity: 0.7;
	pointer-events: none;
	border-radius: 12px;
}

.ranking-box::after {
	content: "";
	position: absolute;
	top: -0.6rem;
	right: -0.6rem;
	width: 5rem;
	height: 5rem;
	background: radial-gradient(circle, rgba(var(--color-accent), 0.16), transparent 60%);
	filter: blur(6px);
	pointer-events: none;
}

.ranking-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 186, 112, 0.22) inset;
	border-color: rgba(var(--color-accent), 0.52);
}

.ranking-box .box-title {
	background: linear-gradient(180deg, rgba(var(--color-accent), 0.16) 0%, rgba(var(--color-accent), 0.06) 100%);
	border-bottom: 1px solid rgba(var(--color-accent), 0.22);
	padding: 1.05rem 1.4rem;
	margin: 0;
	font-family: var(--font-4, serif);
	font-size: 1.1rem;
	font-weight: 700;
	color: rgba(var(--color-accent), 1);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	position: relative;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	box-shadow: 0 1px 0 rgba(255, 186, 112, 0.12) inset;
	z-index: 1;
}

.ranking-box .box-title i {
	font-size: 1.1rem;
	opacity: 0.92;
}

.ranking-box .box-title::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--color-accent), 0.42), transparent);
}

.ranking-box .box-content {
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 178, 111, 0.3) transparent;
	position: relative;
	z-index: 1;
}

.ranking-box .box-content::-webkit-scrollbar {
	width: 6px;
}

.ranking-box .box-content::-webkit-scrollbar-track {
	background: transparent;
}

.ranking-box .box-content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 178, 111, 0.3);
	border-radius: 3px;
}

.ranking-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.875rem;
	background: linear-gradient(180deg, rgba(30, 25, 20, 0.6) 0%, rgba(20, 17, 14, 0.8) 100%);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 178, 111, 0.08);
}

.ranking-table thead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(255, 178, 111, 0.12) 0%, rgba(255, 178, 111, 0.05) 100%);
}

.ranking-table th {
	padding: 1rem 1.25rem;
	text-align: left;
	color: #ffba70;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: none;
	border-bottom: 2px solid rgba(255, 178, 111, 0.2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ranking-table th:first-child {
	padding-left: 1.5rem;
	text-align: center;
}

.ranking-table tbody tr {
	transition: all 0.25s ease;
	border-left: 3px solid transparent;
}

.ranking-table tbody tr:nth-child(odd) {
	background: rgba(255, 255, 255, 0.02);
}

.ranking-table tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.15);
}

.ranking-table tbody tr:hover {
	background: rgba(255, 178, 111, 0.12);
	border-left-color: rgba(255, 178, 111, 0.6);
	transform: translateX(2px);
}

.ranking-table td {
	padding: 0.875rem 1.25rem;
	color: #e0d4c4;
	border: none;
	border-bottom: 1px solid rgba(255, 178, 111, 0.06);
	vertical-align: middle;
}

.ranking-table td:first-child {
	padding-left: 1.5rem;
	text-align: center;
	font-weight: 700;
	font-size: 0.9rem;
	color: #a89070;
}

/* Top 3 ranks - Premium styling */
.ranking-table tr.rank-gold {
	border-left: 3px solid #ffd700;
}

.ranking-table tr.rank-gold td {
	background: linear-gradient(90deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.05) 50%, transparent 100%);
	color: #ffeaa0;
	font-weight: 600;
}

.ranking-table tr.rank-gold td:first-child {
	color: #ffd700;
	font-size: 1rem;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.ranking-table tr.rank-silver {
	border-left: 3px solid #c0c0c0;
}

.ranking-table tr.rank-silver td {
	background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.04) 50%, transparent 100%);
	color: #e0e0e0;
	font-weight: 600;
}

.ranking-table tr.rank-silver td:first-child {
	color: #c0c0c0;
	font-size: 0.95rem;
	text-shadow: 0 0 8px rgba(192, 192, 192, 0.4);
}

.ranking-table tr.rank-bronze {
	border-left: 3px solid #cd7f32;
}

.ranking-table tr.rank-bronze td {
	background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.04) 50%, transparent 100%);
	color: #e8c090;
	font-weight: 600;
}

.ranking-table tr.rank-bronze td:first-child {
	color: #cd7f32;
	font-size: 0.95rem;
	text-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
}

/* Empty and Loading states */
.ranking-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: #81674e;
	font-style: italic;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 0.5rem;
}

.ranking-loading {
	text-align: center;
}

.ranking-loading td {
	padding: 2.5rem 1rem;
	color: #a89070;
	font-size: 0.9rem;
	background: transparent !important;
}

.ranking-loading i {
	margin-right: 0.625rem;
	color: #ffba70;
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

/* Boss status badges */
.boss-alive {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
	color: #4ade80;
	border-radius: 2rem;
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid rgba(34, 197, 94, 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.boss-alive::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 8px #22c55e;
	animation: glow-green 2s ease-in-out infinite;
}

@keyframes glow-green {

	0%,
	100% {
		box-shadow: 0 0 4px #22c55e;
	}

	50% {
		box-shadow: 0 0 12px #22c55e, 0 0 20px rgba(34, 197, 94, 0.4);
	}
}

.boss-dead {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
	color: #f87171;
	border-radius: 2rem;
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid rgba(239, 68, 68, 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.boss-dead::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVER INFO PAGE - Styled information layouts
   ═══════════════════════════════════════════════════════════════════════════ */

.server-info-page {
	padding: 2rem 0 3rem;
	position: relative;
}

.server-info-page::before {
	content: "";
	position: absolute;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(var(--color-accent), 0.1), transparent 55%);
	filter: blur(10px);
	opacity: 0.7;
	pointer-events: none;
	top: -10rem;
	left: -6rem;
}

/* Grid Layout - responsive */
.server-info-page>.row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	align-items: stretch;
	padding: 0;
}

.server-info-page>.row:last-child {
	margin-bottom: 0;
}

.server-info-page>.row>.col-md-4,
.server-info-page>.row>.col-md-6,
.server-info-page>.row>.col-md-12 {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	flex: none !important;
}

/* Server Meta - Date/Timezone badges */
.server-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--color-accent), 0.1);
}

.server-meta .meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	background: rgba(var(--color-accent), 0.08);
	border: 1px solid rgba(var(--color-accent), 0.15);
	border-radius: 6px;
	color: #e0c8a8;
	font-size: 0.9rem;
}

.server-meta .meta-item i {
	color: rgba(var(--color-accent), 0.9);
}

/* Rates Grid - compact stat boxes */
.rates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 0.65rem;
}

.rate-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.5rem;
	background: rgba(var(--color-accent), 0.08);
	border: 1px solid rgba(var(--color-accent), 0.15);
	border-radius: 8px;
	text-align: center;
	transition: all 0.2s ease;
}

.rate-item:hover {
	background: rgba(var(--color-accent), 0.14);
	border-color: rgba(var(--color-accent), 0.28);
	transform: translateY(-2px);
}

.rate-label {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.rate-value {
	font-size: 1.15rem;
	font-weight: 700;
	color: rgba(var(--color-accent), 1);
	font-family: var(--font-4, serif);
}

/* Info List - icon-prefixed list items */
.info-list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.55rem 0.85rem;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 6px;
	color: #d4c4b0;
	font-size: 0.92rem;
	line-height: 1.5;
	transition: background 0.2s ease;
}

.info-item:hover {
	background: rgba(var(--color-accent), 0.06);
}

.info-item i {
	color: rgba(var(--color-accent), 0.85);
	font-size: 0.88rem;
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.info-item strong {
	color: #f0d9b5;
}

.info-item.highlight {
	background: rgba(var(--color-accent), 0.12);
	border: 1px solid rgba(var(--color-accent), 0.2);
}

.info-item.highlight i {
	color: rgba(var(--color-accent), 1);
}

/* Commands Grid - code-style command tags */
.commands-grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.command-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	background: rgba(15, 15, 15, 0.5);
	border-radius: 5px;
	font-size: 0.88rem;
}

.command-item code {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	background: rgba(var(--color-accent), 0.18);
	border: 1px solid rgba(var(--color-accent), 0.25);
	border-radius: 4px;
	color: rgba(var(--color-accent), 1);
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 0.82rem;
	font-weight: 600;
}

.command-item span {
	color: #c0b09a;
	font-size: 0.85rem;
	margin-left: 0.3rem;
}

/* Boss Grid - compact boss respawn info */
.boss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.6rem;
}

.boss-item {
	display: flex;
	flex-direction: column;
	padding: 0.65rem 0.8rem;
	background: rgba(15, 15, 15, 0.5);
	border: 1px solid rgba(var(--color-accent), 0.1);
	border-radius: 6px;
	transition: all 0.2s ease;
}

.boss-item:hover {
	background: rgba(var(--color-accent), 0.08);
	border-color: rgba(var(--color-accent), 0.22);
}

.boss-name {
	font-weight: 600;
	color: #f0d9b5;
	font-size: 0.9rem;
	margin-bottom: 0.2rem;
}

.boss-time {
	font-size: 0.78rem;
	color: rgba(var(--color-accent), 0.9);
}

/* Instance Grid - detailed instance info cards */
.instance-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

.instance-item {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 1rem;
	background: linear-gradient(135deg, rgba(var(--color-accent), 0.08), rgba(var(--color-accent), 0) 60%);
	border: 1px solid rgba(var(--color-accent), 0.12);
	border-radius: 8px;
	transition: all 0.2s ease;
}

.instance-item:hover {
	background: linear-gradient(135deg, rgba(var(--color-accent), 0.14), rgba(var(--color-accent), 0.02) 60%);
	border-color: rgba(var(--color-accent), 0.25);
	transform: translateY(-2px);
}

.instance-name {
	font-weight: 600;
	color: #f7e2c1;
	font-size: 0.95rem;
	margin-bottom: 0.3rem;
}

.instance-info {
	font-size: 0.82rem;
	color: #b8a890;
}

/* Responsive adjustments */
@media (max-width: 900px) {
	.server-info-page>.row {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.25rem;
	}

	.rates-grid {
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	}
}

@media (max-width: 600px) {
	.server-info-page {
		padding: 1.25rem 0 2rem;
	}

	.server-meta {
		flex-direction: column;
		gap: 0.5rem;
	}

	.boss-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.instance-grid {
		grid-template-columns: 1fr;
	}
}

/* Enchant Compact Tables (Interlude 50x) */
.enchant-compact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.enchant-row {
	display: flex;
	justify-content: space-between;
	padding: 0.4rem 0.75rem;
	background: linear-gradient(135deg, rgba(232, 200, 156, 0.08) 0%, rgba(232, 200, 156, 0.04) 100%);
	border-radius: 4px;
	border: 1px solid rgba(232, 200, 156, 0.1);
	transition: all 0.2s ease;
}

.enchant-row:hover {
	background: linear-gradient(135deg, rgba(232, 200, 156, 0.15) 0%, rgba(232, 200, 156, 0.08) 100%);
	border-color: rgba(232, 200, 156, 0.2);
}

.enchant-row span:first-child {
	color: #d4a574;
	font-weight: 600;
}

.enchant-row span:last-child {
	color: #8fbf7f;
	font-weight: 700;
}