:root {
	--internal-bg: #0b0b0c;
	--internal-surface: #161616;
	--internal-raised: #202020;
	--internal-border: #343438;
	--internal-text: #f5f5f5;
	--internal-muted: #b5b5ba;
	--internal-red: #e40b0b;
	--internal-red-bright: #ff4a4a;
	--internal-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

html { background: var(--internal-bg); }
body { background: var(--internal-bg); color: var(--internal-text); }

#header {
	align-items: center;
	background: rgba(7, 7, 7, .95);
	border-bottom: 1px solid var(--internal-border);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
	display: flex;
	height: 5rem;
	justify-content: space-between;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
	position: sticky;
	top: 0;
	z-index: 20;
}

#header .title {
	align-items: center;
	color: var(--internal-text);
	display: inline-flex;
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none;
}

#header .title:before {
	background: linear-gradient(135deg, var(--internal-red-bright), var(--internal-red));
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(228, 11, 11, .12);
	content: '';
	height: .7rem;
	margin-right: .8rem;
	width: .7rem;
}

#header nav { height: auto; }
#header nav ul { align-items: center; display: flex; margin: 0; }
#header nav ul li { display: block; margin: 0; padding: 0; }
#header nav ul li a {
	border: 1px solid #5a3333;
	border-radius: 10px;
	color: var(--internal-red-bright);
	font-size: .75rem;
	font-weight: 800;
	height: auto;
	letter-spacing: .08em;
	line-height: 1;
	padding: .8rem 1.1rem;
	text-transform: uppercase;
}
#header nav ul li a:hover { background: rgba(228, 11, 11, .14); color: #fff; }

#wrapper { background: var(--internal-bg); min-height: calc(100vh - 11rem); }
#main.wrapper { background: radial-gradient(circle at 85% 8%, rgba(228,11,11,.1), transparent 28%), var(--internal-bg); }
#main > .inner { max-width: 1180px; padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem); }

#main > .inner:before {
	color: var(--internal-red-bright);
	content: 'CENTRAL DE AJUDA  /  TUTORIAL';
	display: block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .15em;
	margin-bottom: 1rem;
}

#main h1.major {
	color: var(--internal-text);
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: -.035em;
	line-height: 1.12;
	margin: 0 0 2.25rem;
	max-width: 950px;
	padding-bottom: 1.25rem;
}
#main h1.major:after {
	background: linear-gradient(90deg, var(--internal-red), var(--internal-red-bright));
	height: 3px;
	width: 5rem;
}

#main .image.fit {
	background: linear-gradient(145deg, var(--internal-raised), var(--internal-surface));
	border: 1px solid var(--internal-border);
	border-radius: 18px;
	box-shadow: var(--internal-shadow);
	display: block;
	margin: 0 0 2rem;
	overflow: hidden;
	padding: clamp(.5rem, 1.5vw, 1rem);
	text-align: center;
}

#main video {
	background: #03070c;
	border-radius: 11px;
	display: block;
	height: auto !important;
	margin: 0 auto;
	max-height: 72vh;
	max-width: 100%;
	width: 100% !important;
}

#main > .inner > p {
	background: rgba(22, 37, 54, .7);
	border-left: 3px solid var(--internal-red);
	border-radius: 0 12px 12px 0;
	color: var(--internal-muted);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
	padding: 1.2rem 1.4rem;
}

#footer.wrapper, #footer.wrapper.alt {
	background: #050505;
	border-top: 1px solid var(--internal-border);
}
#footer > .inner { padding: 1.8rem clamp(1.25rem, 5vw, 5rem); }
#footer .menu { color: #718397; font-size: .76rem; margin: 0; }

/* Standalone changelog */
body > header:not(#header) {
	background: radial-gradient(circle at 80% 20%, rgba(228,11,11,.18), transparent 30%), linear-gradient(135deg, #080808, #251010);
	border-bottom: 1px solid var(--internal-border);
	border-radius: 0;
	color: var(--internal-text);
	padding: 3.5rem 1.5rem;
}
body > header:not(#header) h1 { margin: 0; }
body > .container { background: transparent; box-shadow: none; margin: 0 auto; max-width: 1100px; padding: 3rem 1.5rem; }
#searchInput {
	background: var(--internal-surface) !important;
	border: 1px solid #5a3333 !important;
	border-radius: 12px !important;
	box-sizing: border-box;
	color: var(--internal-text);
	margin-bottom: 2rem !important;
	outline: none;
}
#searchInput:focus { border-color: var(--internal-red) !important; box-shadow: 0 0 0 3px rgba(228,11,11,.12); }
.version-block { background: var(--internal-surface); border: 1px solid var(--internal-border); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; }
.version { background: transparent !important; margin: 0 !important; }
.version h2 { background: linear-gradient(90deg, #331313, #211717) !important; border-radius: 0 !important; color: var(--internal-red-bright) !important; padding: 1rem 1.25rem !important; }
.changelog-list { color: var(--internal-muted); padding: 1.25rem 1.5rem 1.25rem 2.8rem !important; }
body > footer:not(#footer) { color: #718397; }

/* Content unavailable page */
#bg-animation { background: linear-gradient(135deg, #070707 0%, #211010 100%) !important; }
.blob { background: rgba(228, 11, 11, .13) !important; }
.glass-card { background: rgba(17, 28, 42, .82) !important; border-color: var(--internal-border) !important; box-shadow: var(--internal-shadow) !important; }
.btn-back { background: var(--internal-red) !important; box-shadow: 0 10px 24px rgba(228,11,11,.22) !important; color: #fff !important; }
.btn-back:hover { background: var(--internal-red-bright) !important; }

@media screen and (max-width: 736px) {
	#header { height: 4.25rem; }
	#header .title { font-size: .82rem; }
	#header nav ul li a { padding: .65rem .8rem; }
	#main > .inner { padding-top: 3rem; }
	#main h1.major { margin-bottom: 1.6rem; }
	#main .image.fit { border-radius: 12px; margin-bottom: 1.25rem; padding: .4rem; }
	#main video { border-radius: 8px; }
}

@media screen and (max-width: 480px) {
	#header .title:before { display: none; }
	#header nav ul li a { font-size: .68rem; }
	#main > .inner:before { font-size: .64rem; }
}