/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN

   PART 1/5
   GLOBAL + HERO SYSTEM

   FINAL CLEAN BUILD
========================================================= */


/* =========================================================
   GLOBAL WRAPPER
========================================================= */


.cs-index-page{

	width:100%;

	position:relative;

	padding-bottom:40px;

}



.cs-index-page *{

	box-sizing:border-box;

}







/* =========================================================
   HERO SECTION
========================================================= */


.cs-index-hero{

	display:grid;

	grid-template-columns:

		minmax(0,1fr)
		340px;

	gap:

		35px;

	align-items:center;

	margin-bottom:

		35px;

}





.cs-index-hero-content{

	min-width:0;

}





/* =========================================================
   HERO BADGE
========================================================= */


.cs-index-badge{

	display:flex;

	align-items:center;

	gap:

		10px;

	width:max-content;

	padding:

		8px 16px;

	margin-bottom:

		20px;

	border-radius:

		30px;

	background:

		rgba(57,255,20,.08);

	border:

		1px solid rgba(57,255,20,.30);

	color:

		#39ff14;

	font-size:

		12px;

	font-weight:

		900;

	text-transform:

		uppercase;

	letter-spacing:

		.3px;

}





.cs-index-badge i{

	font-size:

		14px;

	filter:

		drop-shadow(0 0 7px rgba(57,255,20,.50));

}







/* =========================================================
   HERO TITLE
========================================================= */


.cs-index-hero h1{

	margin:

		0 0 18px;

	max-width:

		900px;

	color:

		#ffffff;

	font-size:

		44px;

	line-height:

		1.15;

	font-weight:

		950;

	letter-spacing:

		-.8px;

}





.cs-index-hero p{

	max-width:

		720px;

	margin:

		0;

	color:

		rgba(255,255,255,.65);

	font-size:

		16px;

	line-height:

		1.7;

}







/* =========================================================
   HERO FEATURES
========================================================= */


.cs-index-features{

	display:flex;

	flex-wrap:wrap;

	gap:

		12px;

	margin-top:

		26px;

}





.cs-index-feature{

	display:flex;

	align-items:center;

	gap:

		11px;

	padding:

		11px 15px;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.06);

	border:

		1px solid rgba(57,255,20,.20);

	transition:

		.25s ease;

}





.cs-index-feature:hover{

	transform:

		translateY(-3px);

	background:

		rgba(57,255,20,.12);

	border-color:

		rgba(57,255,20,.45);

	box-shadow:

		0 0 25px rgba(57,255,20,.10);

}





.cs-index-feature > i{

	width:

		36px;

	height:

		36px;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	border-radius:

		12px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	font-size:

		15px;

	filter:

		drop-shadow(0 0 6px rgba(57,255,20,.45));

}





.cs-index-feature span{

	display:flex;

	flex-direction:column;

	color:

		rgba(255,255,255,.65);

	font-size:

		11px;

	line-height:

		1.3;

}





.cs-index-feature strong{

	color:

		#ffffff;

	font-size:

		13px;

	font-weight:

		900;

}







/* =========================================================
   HERO ACTION BUTTONS
========================================================= */


.cs-index-actions{

	display:flex;

	align-items:center;

	gap:

		14px;

	margin-top:

		30px;

}





.cs-index-action{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:

		10px;

	padding:

		13px 24px;

	border-radius:

		14px;

	text-decoration:none;

	font-size:

		14px;

	font-weight:

		900;

	transition:

		.25s ease;

}





.cs-index-action:hover{

	transform:

		translateY(-3px);

}





.cs-index-action-login{

	background:

		#39ff14;

	color:

		#071018;

	box-shadow:

		0 0 30px rgba(57,255,20,.25);

}





.cs-index-action-login,
.cs-index-action-login i{

	color:

		#071018 !important;

}





.cs-index-action-register{

	background:

		rgba(57,255,20,.08);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

}





.cs-index-action-register:hover{

	background:

		rgba(57,255,20,.18);

	border-color:

		rgba(57,255,20,.55);

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN

   PART 2/5
   HERO SIDE + SERVER CARD SYSTEM

   FINAL CLEAN BUILD
========================================================= */



/* =========================================================
   HERO SIDE WRAPPER
========================================================= */


.cs-index-hero-side{

	display:flex;

	flex-direction:column;

	gap:

		20px;

}





/* =========================================================
   GENERIC HERO CARD
========================================================= */


.cs-index-hero-card{

	position:relative;

	padding:

		24px;

	background:

		linear-gradient(
			180deg,
			rgba(15,25,35,.98),
			rgba(5,14,22,.98)
		);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		24px;

	box-shadow:

		0 20px 50px rgba(0,0,0,.30);

	overflow:hidden;

}





.cs-index-hero-card::before{

	content:"";

	position:absolute;

	inset:0;

	background:

		radial-gradient(
			circle at top right,
			rgba(57,255,20,.12),
			transparent 55%
		);

	pointer-events:none;

}





.cs-index-hero-card:hover{

	border-color:

		rgba(57,255,20,.38);

	box-shadow:

		0 25px 60px rgba(0,0,0,.35),
		0 0 30px rgba(57,255,20,.08);

}







/* =========================================================
   SERVER ICON
========================================================= */


.cs-server-icon{

	position:relative;

	width:

		50px;

	height:

		50px;

	display:flex;

	align-items:center;

	justify-content:center;

	margin-bottom:

		16px;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.40);

	color:

		#39ff14;

	font-size:

		22px;

	box-shadow:

		0 0 25px rgba(57,255,20,.20);

}





.cs-server-icon i{

	margin:

		0;

	width:

		auto;

	height:

		auto;

	background:none;

	border:0;

	font-size:inherit;

}







/* =========================================================
   SERVER TITLE
========================================================= */


.cs-server-title{

	position:relative;

	display:flex;

	flex-direction:column;

	gap:

		6px;

}





.cs-server-label{

	color:

		#39ff14;

	font-size:

		11px;

	font-weight:

		900;

	text-transform:

		uppercase;

	letter-spacing:

		.5px;

}





.cs-server-title strong{

	color:

		#ffffff;

	font-size:

		19px;

	font-weight:

		950;

	line-height:

		1.3;

}







/* =========================================================
   SERVER STATUS
========================================================= */


.cs-server-status{

	position:relative;

	display:flex;

	align-items:center;

	gap:

		8px;

	width:max-content;

	margin-top:

		14px;

	padding:

		6px 14px;

	border-radius:

		30px;

	background:

		rgba(57,255,20,.10);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	font-size:

		11px;

	font-weight:

		900;

}





.cs-server-status i{

	width:

		7px;

	height:

		7px;

	margin:

		0;

	border-radius:

		50%;

	background:

		#39ff14;

	color:

		#39ff14;

	box-shadow:

		0 0 10px rgba(57,255,20,.90);

	font-size:

		0;

}







/* =========================================================
   SERVER INFORMATION
========================================================= */


.cs-server-info{

	position:relative;

	display:flex;

	flex-direction:column;

	gap:

		12px;

	margin-top:

		18px;

}





.cs-server-info div{

	display:flex;

	align-items:center;

	gap:

		10px;

	color:

		rgba(255,255,255,.65);

	font-size:

		13px;

}





.cs-server-info i{

	width:

		16px;

	margin:

		0;

	color:

		#39ff14;

	font-size:

		13px;

	filter:

		drop-shadow(0 0 5px rgba(57,255,20,.45));

}







/* =========================================================
   CONNECT BUTTON
========================================================= */


.cs-server-connect{

	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

	gap:

		8px;

	margin-top:

		20px;

	padding:

		11px 16px;

	border-radius:

		14px;

	background:

		rgba(57,255,20,.10);

	border:

		1px solid rgba(57,255,20,.40);

	color:

		#39ff14;

	text-decoration:none;

	font-size:

		13px;

	font-weight:

		900;

	transition:

		.25s ease;

}





.cs-server-connect:hover{

	background:

		#39ff14;

	color:

		#071018;

	box-shadow:

		0 0 30px rgba(57,255,20,.45);

	transform:

		translateY(-2px);

}





.cs-server-connect i{

	width:

		auto;

	height:

		auto;

	margin:

		0;

	background:none;

	border:0;

	font-size:

		13px;

}







/* =========================================================
   COMMUNITY CARD
========================================================= */


.cs-community-card{

	position:relative;

}





.cs-community-card > i{

	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

	width:

		50px;

	height:

		50px;

	margin-bottom:

		16px;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.40);

	color:

		#39ff14;

	font-size:

		22px;

}





.cs-community-card strong{

	position:relative;

	display:block;

	color:

		#ffffff;

	font-size:

		19px;

	font-weight:

		950;

}





.cs-community-card span{

	position:relative;

	display:block;

	margin-top:

		12px;

	color:

		rgba(255,255,255,.60);

	font-size:

		13px;

	line-height:

		1.8;

}





.cs-community-card span i{

	width:

		auto;

	height:

		auto;

	margin:

		0 7px 0 0;

	background:none;

	border:0;

	color:

		#39ff14;

	font-size:

		12px;

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN

   PART 3/5
   CONTENT + FORUM CATEGORY SYSTEM

   FINAL CLEAN BUILD
========================================================= */



/* =========================================================
   MAIN INDEX LAYOUT
========================================================= */


.cs-index-layout{

	display:grid;

	grid-template-columns:

		minmax(0,1fr)
		340px;

	gap:

		30px;

	align-items:start;

}





.cs-index-main{

	min-width:0;

}





.cs-index-sidebar{

	min-width:0;

	display:flex;

	flex-direction:column;

	gap:

		30px;

}







/* =========================================================
   PANEL SYSTEM
========================================================= */


.cs-index-panel{

	position:relative;

	padding:

		28px;

	background:

		linear-gradient(
			180deg,
			rgba(15,25,35,.98),
			rgba(5,14,22,.98)
		);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		26px;

	box-shadow:

		0 20px 50px rgba(0,0,0,.25);

	overflow:hidden;

}





.cs-index-panel::before{

	content:"";

	position:absolute;

	inset:0;

	background:

		radial-gradient(
			circle at top left,
			rgba(57,255,20,.07),
			transparent 45%
		);

	pointer-events:none;

}





.cs-index-panel-head{

	position:relative;

	margin-bottom:

		28px;

}





.cs-index-panel-kicker{

	display:flex;

	align-items:center;

	gap:

		8px;

	color:

		#39ff14;

	font-size:

		12px;

	font-weight:

		900;

	text-transform:

		uppercase;

}





.cs-index-panel-kicker i{

	filter:

		drop-shadow(0 0 6px rgba(57,255,20,.45));

}





.cs-index-panel-head h2{

	margin:

		8px 0;

	color:

		#fff;

	font-size:

		28px;

	line-height:

		1.2;

	font-weight:

		950;

}





.cs-index-panel-head p{

	margin:

		0;

	color:

		rgba(255,255,255,.55);

	font-size:

		14px;

	line-height:

		1.6;

}







/* =========================================================
   CATEGORY WRAPPER
========================================================= */


.cs-index-categories{

	display:flex;

	flex-direction:column;

	gap:

		24px;

}







/* =========================================================
   CATEGORY CARD
========================================================= */


.cs-esports-category{

	position:relative;

	background:

		linear-gradient(
			180deg,
			rgba(12,25,32,.98),
			rgba(5,14,22,.98)
		);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		24px;

	overflow:hidden;

	transition:

		.25s ease;

}





.cs-esports-category:hover{

	border-color:

		rgba(57,255,20,.45);

	box-shadow:

		0 20px 50px rgba(0,0,0,.35),
		0 0 30px rgba(57,255,20,.10);

}







/* =========================================================
   CATEGORY HEADER
========================================================= */


.cs-esports-category-head{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:

		24px 28px;

	background:

		linear-gradient(
			90deg,
			rgba(57,255,20,.12),
			transparent 70%
		);

	border-bottom:

		1px solid rgba(255,255,255,.06);

}





.cs-esports-category-left{

	display:flex;

	align-items:center;

	gap:

		18px;

}





.cs-esports-category-icon{

	width:

		60px;

	height:

		60px;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	border-radius:

		18px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.45);

	color:

		#39ff14;

	font-size:

		25px;

	filter:

		drop-shadow(0 0 8px rgba(57,255,20,.45));

}





.cs-esports-category-icon i{

	margin:

		0;

	width:

		auto;

	height:

		auto;

	background:none;

	border:0;

}







/* =========================================================
   CATEGORY TITLE
========================================================= */


.cs-esports-category-title h3{

	margin:

		0;

	color:

		#fff;

	font-size:

		24px;

	font-weight:

		950;

}





.cs-esports-category-badge{

	display:flex;

	align-items:center;

	gap:

		8px;

	padding:

		8px 16px;

	border-radius:

		30px;

	background:

		rgba(57,255,20,.08);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	font-size:

		12px;

	font-weight:

		800;

}







/* =========================================================
   CATEGORY BODY
========================================================= */


.cs-esports-category-body{

	padding:

		18px;

}





.cs-esports-forum-list{

	list-style:none;

	margin:

		0;

	padding:

		0;

	display:flex;

	flex-direction:column;

	gap:

		16px;

}







/* =========================================================
   FORUM ROW
========================================================= */


.cs-forum-v2-row{

	position:relative;

	display:grid;

	grid-template-columns:

		75px
		minmax(250px,1fr)
		260px
		50px;

	align-items:center;

	gap:

		20px;

	padding:

		24px;

	background:

		linear-gradient(
			135deg,
			rgba(15,25,35,.98),
			rgba(5,14,22,.98)
		);

	border:

		1px solid rgba(57,255,20,.14);

	border-radius:

		20px;

	overflow:hidden;

	transition:

		.25s ease;

}





.cs-forum-v2-row::before{

	content:"";

	position:absolute;

	left:

		0;

	top:

		20px;

	bottom:

		20px;

	width:

		4px;

	background:

		#39ff14;

	border-radius:

		0 10px 10px 0;

	box-shadow:

		0 0 12px rgba(57,255,20,.65);

}





.cs-forum-v2-row:hover{

	transform:

		translateY(-3px);

	border-color:

		rgba(57,255,20,.45);

	box-shadow:

		0 18px 45px rgba(0,0,0,.35),
		0 0 25px rgba(57,255,20,.10);

}







/* =========================================================
   FORUM ICON
========================================================= */


.cs-forum-v2-icon{

	width:

		64px;

	height:

		64px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:

		18px;

	background:

		rgba(57,255,20,.16);

	border:

		1px solid rgba(57,255,20,.45);

	color:

		#39ff14;

	font-size:

		28px;

	transition:

		.25s ease;

}





.cs-forum-v2-icon:hover{

	transform:

		scale(1.08);

	box-shadow:

		0 0 25px rgba(57,255,20,.45);

}







/* =========================================================
   FORUM INFORMATION
========================================================= */


.cs-forum-v2-info{

	min-width:0;

}





.cs-forum-v2-info h4{

	margin:

		0 0 8px;

	font-size:

		19px;

	font-weight:

		900;

}





.cs-forum-v2-info h4 a{

	color:

		#fff;

	text-decoration:none;

	transition:

		.2s ease;

}





.cs-forum-v2-info h4 a:hover{

	color:

		#39ff14;

}





.cs-forum-v2-info p{

	margin:

		0;

	color:

		rgba(255,255,255,.58);

	font-size:

		13px;

	line-height:

		1.55;

	max-width:

		600px;

}





/* =========================================================
   FORUM STAT BADGES
========================================================= */


.cs-forum-v2-stats{

	display:flex;

	align-items:center;

	gap:

		10px;

	margin-top:

		14px;

}





.cs-forum-v2-stats span{

	display:flex;

	align-items:center;

	gap:

		7px;

	padding:

		7px 12px;

	border-radius:

		12px;

	background:

		rgba(57,255,20,.08);

	border:

		1px solid rgba(57,255,20,.22);

	color:

		rgba(255,255,255,.80);

	font-size:

		11px;

	font-weight:

		700;

}





.cs-forum-v2-stats i{

	color:

		#39ff14;

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN

   PART 4/5
   SIDEBAR + ACTIVITY + STATS SYSTEM

   FINAL CLEAN BUILD
========================================================= */



/* =========================================================
   LAST MESSAGE SYSTEM
========================================================= */


.cs-forum-v2-last{

	min-width:0;

	padding-left:

		20px;

	border-left:

		1px solid rgba(255,255,255,.08);

	display:flex;

	flex-direction:column;

	justify-content:center;

}





.cs-forum-v2-last-label{

	display:flex;

	align-items:center;

	gap:

		8px;

	margin-bottom:

		10px;

	color:

		#39ff14;

	font-size:

		11px;

	font-weight:

		900;

	text-transform:

		uppercase;

}





.cs-forum-v2-last-label i{

	color:

		#39ff14;

	filter:

		drop-shadow(0 0 6px rgba(57,255,20,.45));

}





.cs-forum-v2-last-content{

	max-width:

		230px;

	color:

		rgba(255,255,255,.80);

	font-size:

		13px;

	line-height:

		1.5;

	white-space:

		nowrap;

	overflow:

		hidden;

	text-overflow:

		ellipsis;

}





.cs-forum-v2-last-content a{

	color:

		#39ff14;

	text-decoration:

		none;

	font-weight:

		800;

}





.cs-forum-v2-last-content a:hover{

	text-decoration:

		underline;

}







/* =========================================================
   FORUM ARROW
========================================================= */


.cs-forum-v2-arrow{

	width:

		44px;

	height:

		44px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:

		50%;

	background:

		rgba(57,255,20,.08);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	text-decoration:

		none;

	transition:

		.25s ease;

}





.cs-forum-v2-arrow:hover{

	background:

		#39ff14;

	color:

		#071018;

	transform:

		translateX(5px);

	box-shadow:

		0 0 25px rgba(57,255,20,.45);

}







/* =========================================================
   SIDEBAR PANEL COMPACT
========================================================= */


.cs-index-sidebar .cs-index-panel{

	padding:

		24px;

}





.cs-index-sidebar .cs-index-panel-head{

	margin-bottom:

		22px;

}





.cs-index-sidebar .cs-index-panel-head h2{

	font-size:

		22px;

}





.cs-index-sidebar .cs-index-panel-head p{

	font-size:

		12px;

}







/* =========================================================
   LATEST THREADS WRAPPER
========================================================= */


.cs-index-latest{

	display:flex;

	flex-direction:column;

	gap:

		14px;

}







/* =========================================================
   LATEST THREAD CARD
========================================================= */


.cs-latestthreads-box{

	display:flex;

	flex-direction:column;

	gap:

		14px;

}





.cs-latestthread-card{

	position:relative;

	display:flex;

	align-items:center;

	gap:

		14px;

	padding:

		16px;

	background:

		rgba(10,20,30,.75);

	border:

		1px solid rgba(57,255,20,.16);

	border-radius:

		16px;

	transition:

		.25s ease;

}





.cs-latestthread-card:hover{

	transform:

		translateX(5px);

	border-color:

		rgba(57,255,20,.45);

	box-shadow:

		0 0 25px rgba(57,255,20,.10);

}





.cs-latestthread-icon-wrap{

	width:

		44px;

	height:

		44px;

	flex-shrink:0;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:

		50%;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

}





.cs-latestthread-content{

	min-width:0;

	flex:1;

}





.cs-latestthread-title{

	display:block;

	color:

		#ffffff;

	font-size:

		14px;

	font-weight:

		850;

	text-decoration:

		none;

	white-space:

		nowrap;

	overflow:

		hidden;

	text-overflow:

		ellipsis;

}





.cs-latestthread-title:hover{

	color:

		#39ff14;

}





.cs-latestthread-meta{

	display:flex;

	flex-wrap:

		wrap;

	gap:

		10px;

	margin-top:

		8px;

}





.cs-latestthread-meta span{

	display:flex;

	align-items:center;

	gap:

		5px;

	color:

		rgba(255,255,255,.55);

	font-size:

		11px;

}





.cs-latestthread-meta i{

	color:

		#39ff14;

}





.cs-latestthread-arrow{

	width:

		34px;

	height:

		34px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:

		50%;

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	text-decoration:

		none;

	transition:

		.25s ease;

}





.cs-latestthread-arrow:hover{

	background:

		#39ff14;

	color:

		#071018;

}







/* =========================================================
   COMMUNITY DASHBOARD CARD
========================================================= */


.cs-dashboard-card{

	position:relative;

	padding:

		24px;

	background:

		linear-gradient(
			180deg,
			rgba(15,25,35,.98),
			rgba(5,14,22,.98)
		);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		24px;

	box-shadow:

		0 20px 45px rgba(0,0,0,.25);

}





.cs-dashboard-header{

	display:flex;

	align-items:center;

	gap:

		16px;

	padding-bottom:

		18px;

	border-bottom:

		1px solid rgba(255,255,255,.06);

}





.cs-dashboard-icon{

	width:

		52px;

	height:

		52px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.40);

	color:

		#39ff14;

	font-size:

		21px;

}





.cs-dashboard-title span{

	display:block;

	color:

		#39ff14;

	font-size:

		11px;

	font-weight:

		900;

	text-transform:

		uppercase;

}





.cs-dashboard-title h3{

	margin:

		5px 0;

	color:

		#fff;

	font-size:

		20px;

	font-weight:

		950;

}





.cs-dashboard-title p{

	margin:

		0;

	color:

		rgba(255,255,255,.55);

	font-size:

		12px;

}







/* =========================================================
   DASHBOARD STATS
========================================================= */


.cs-dashboard-grid{

	display:grid;

	grid-template-columns:

		1fr;

	gap:

		12px;

	margin-top:

		20px;

}





.cs-dashboard-stat{

	display:flex;

	align-items:center;

	gap:

		14px;

	padding:

		16px;

	background:

		rgba(57,255,20,.06);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		16px;

}





.cs-dashboard-stat-icon{

	width:

		42px;

	height:

		42px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:

		14px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

}





.cs-dashboard-stat span{

	display:block;

	color:

		rgba(255,255,255,.55);

	font-size:

		11px;

}





.cs-dashboard-stat strong{

	display:block;

	margin-top:

		3px;

	color:

		#fff;

	font-size:

		15px;

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN

   PART 5/5
   STATS + RESPONSIVE + FINAL POLISH

   FINAL CLEAN BUILD
========================================================= */





/* =========================================================
   HOME STATISTICS
========================================================= */


.cs-home-stats-grid{

	display:grid;

	grid-template-columns:

		repeat(4,1fr);

	gap:

		18px;

}





.cs-home-stat-card{

	position:relative;

	display:flex;

	align-items:center;

	gap:

		15px;

	min-height:

		120px;

	padding:

		20px;

	background:

		rgba(57,255,20,.05);

	border:

		1px solid rgba(57,255,20,.18);

	border-radius:

		18px;

	transition:

		.25s ease;

}





.cs-home-stat-card:hover{

	transform:

		translateY(-3px);

	border-color:

		rgba(57,255,20,.45);

	box-shadow:

		0 0 25px rgba(57,255,20,.10);

}





.cs-home-stat-icon{

	width:

		52px;

	height:

		52px;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.35);

	color:

		#39ff14;

	font-size:

		20px;

}





.cs-home-stat-title{

	display:block;

	color:

		rgba(255,255,255,.55);

	font-size:

		11px;

	font-weight:

		900;

	text-transform:

		uppercase;

}





.cs-home-stat-content strong{

	display:block;

	margin-top:

		5px;

	color:

		#ffffff;

	font-size:

		23px;

	font-weight:

		950;

}





.cs-home-stat-content small{

	display:block;

	margin-top:

		4px;

	color:

		rgba(255,255,255,.45);

	font-size:

		11px;

}







/* =========================================================
   BOARDSTATS CLEAN
========================================================= */


.cs-index-boardstats{

	margin:

		0;

	padding:

		0;

}





.cs-index-boardstats .boardstats{

	margin-bottom:

		0 !important;

}





.cs-index-boardstats .tborder{

	margin-bottom:

		0 !important;

}







/* =========================================================
   TABLET RESPONSIVE
========================================================= */


@media(max-width:1200px){


	.cs-index-layout{

		grid-template-columns:

			minmax(0,1fr)
			300px;

		gap:

			22px;

	}




	.cs-index-hero{

		grid-template-columns:

			minmax(0,1fr)
			300px;

	}



	.cs-index-hero h1{

		font-size:

			38px;

	}



	.cs-forum-v2-row{

		grid-template-columns:

			70px
			minmax(200px,1fr)
			220px
			45px;

	}



	.cs-home-stats-grid{

		grid-template-columns:

			repeat(2,1fr);

	}


}







/* =========================================================
   TABLET SMALL
========================================================= */


@media(max-width:950px){


	.cs-index-layout{

		grid-template-columns:

			1fr;

	}




	.cs-index-sidebar{

		order:

			2;

	}




	.cs-index-hero{

		grid-template-columns:

			1fr;

	}




	.cs-index-hero-side{

		display:grid;

		grid-template-columns:

			repeat(2,1fr);

	}




	.cs-forum-v2-row{

		grid-template-columns:

			70px
			1fr;

	}




	.cs-forum-v2-last{

		grid-column:

			1/-1;

		padding-left:

			0;

		padding-top:

			16px;

		margin-top:

			12px;

		border-left:

			0;

		border-top:

			1px solid rgba(255,255,255,.08);

	}

}







/* =========================================================
   MOBILE
========================================================= */


@media(max-width:768px){


	.cs-index-page{

		padding-bottom:

			25px;

	}




	.cs-index-hero h1{

		font-size:

			30px;

	}




	.cs-index-hero p{

		font-size:

			14px;

	}




	.cs-index-panel{

		padding:

			20px;

		border-radius:

			22px;

	}




	.cs-index-features{

		flex-direction:

			column;

	}




	.cs-index-feature{

		width:

			100%;

	}




	.cs-index-actions{

		flex-direction:

			column;

	}




	.cs-index-action{

		width:

			100%;

	}




	.cs-index-hero-side{

		grid-template-columns:

			1fr;

	}




	.cs-forum-v2-row{

		grid-template-columns:

			60px
			1fr;

		padding:

			18px;

	}




	.cs-forum-v2-icon{

		width:

			52px;

		height:

			52px;

		font-size:

			22px;

	}




	.cs-esports-category-head{

		padding:

			18px;

		flex-direction:

			column;

		align-items:

			flex-start;

		gap:

			15px;

	}




	.cs-esports-category-title h3{

		font-size:

			21px;

	}




	.cs-home-stats-grid{

		grid-template-columns:

			1fr;

	}




	.cs-server-title strong{

		font-size:

			17px;

	}

}







/* =========================================================
   SMALL MOBILE
========================================================= */


@media(max-width:480px){


	.cs-index-hero h1{

		font-size:

			26px;

	}




	.cs-index-badge{

		font-size:

			10px;

	}




	.cs-index-panel{

		padding:

			16px;

	}




	.cs-server-icon{

		width:

			44px;

		height:

			44px;

	}




	.cs-home-stat-content strong{

		font-size:

			20px;

	}




	.cs-dashboard-card{

		padding:

			18px;

	}

}







/* =========================================================
   FINAL GLOBAL POLISH
========================================================= */


.cs-index-panel,
.cs-index-hero-card,
.cs-esports-category,
.cs-home-stat-card,
.cs-dashboard-card,
.cs-latestthread-card{

	transition:

		.25s ease;

}




.cs-index-page a{

	outline:none;

}




.cs-index-page a:focus{

	outline:

		1px solid rgba(57,255,20,.45);

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9 CLEAN
   FINAL POLISH FIX
========================================================= */


/* =========================================================
   COMMUNITY CARD FIX
========================================================= */


.cs-index-hero-card span{

	display:block;

}


.cs-index-hero-card span br{

	display:block;

}


.cs-community-card span{

	display:flex;

	flex-direction:column;

	gap:10px;

}





.cs-community-card span i{

	display:inline-block;

	width:auto;

	height:auto;

	margin:

		0 7px 0 0;

	background:none;

	border:0;

	border-radius:0;

	color:#39ff14;

	font-size:12px;

	filter:

		drop-shadow(0 0 5px rgba(57,255,20,.45));

}






/* =========================================================
   SIDEBAR STATISTICS FIX
========================================================= */


.cs-index-sidebar .cs-home-stats-grid{

	display:grid;

	grid-template-columns:

		1fr;

	gap:

		12px;

}





.cs-index-sidebar .cs-home-stat-card{

	min-height:

		90px;

	padding:

		16px;

}





.cs-index-sidebar .cs-home-stat-content strong{

	font-size:

		20px;

}






/* =========================================================
   FORUM ICON COLOR FIX
========================================================= */


.cs-forum-v2-icon i{

	color:

		#39ff14 !important;

}





.cs-forum-v2-icon .forum-custom-icon{

	color:

		#39ff14 !important;

}






/* =========================================================
   FINAL INDEX POLISH
========================================================= */


.cs-index-page .fa{

	line-height:

		1;

}



.cs-index-page button,
.cs-index-page a{

	-webkit-tap-highlight-color:

		transparent;

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9.1

   HERO MOTION PACK
========================================================= */


/* =========================================================
   HERO AMBIENT GLOW
========================================================= */


.cs-index-hero{

	position:relative;

}



.cs-index-hero::before{

	content:"";

	position:absolute;

	top:-120px;

	left:-120px;

	width:420px;

	height:420px;

	background:

		radial-gradient(
			circle,
			rgba(57,255,20,.12),
			transparent 70%
		);

	filter:

		blur(40px);

	animation:

		csHeroGlow 8s ease-in-out infinite;

	pointer-events:none;

	z-index:-1;

}



@keyframes csHeroGlow{


	0%{

		transform:translate(0,0);

		opacity:.7;

	}


	50%{

		transform:translate(50px,30px);

		opacity:1;

	}


	100%{

		transform:translate(0,0);

		opacity:.7;

	}

}







/* =========================================================
   HERO BOTTOM SEPARATOR
========================================================= */


.cs-index-hero::after{

	content:"";

	position:absolute;

	left:0;

	right:0;

	bottom:-20px;

	height:1px;

	background:

		linear-gradient(
			90deg,
			transparent,
			rgba(57,255,20,.65),
			transparent
		);

	box-shadow:

		0 0 15px rgba(57,255,20,.45);

	animation:

		csHeroLine 4s linear infinite;

}





@keyframes csHeroLine{


	0%{

		background-position:

			0 center;

	}


	100%{

		background-position:

			300px center;

	}

}







/* =========================================================
   HERO CONTENT ENTRY
========================================================= */


.cs-index-hero-content{

	animation:

		csHeroFade .7s ease forwards;

}





.cs-index-hero-side{

	animation:

		csHeroSide .8s ease forwards;

}





@keyframes csHeroFade{


	from{

		opacity:0;

		transform:translateY(20px);

	}


	to{

		opacity:1;

		transform:none;

	}

}





@keyframes csHeroSide{


	from{

		opacity:0;

		transform:translateX(30px);

	}


	to{

		opacity:1;

		transform:none;

	}

}







/* =========================================================
   CARD SHINE EFFECT
========================================================= */


.cs-index-hero-card{

	overflow:hidden;

}





.cs-index-hero-card::after{

	content:"";

	position:absolute;

	top:0;

	left:-120%;

	width:80%;

	height:100%;

	background:

		linear-gradient(
			120deg,
			transparent,
			rgba(255,255,255,.08),
			transparent
		);

	transform:

		skewX(-20deg);

	transition:

		.7s ease;

}





.cs-index-hero-card:hover::after{

	left:130%;

}







/* =========================================================
   FEATURE GLOW POLISH
========================================================= */


.cs-index-feature{

	position:relative;

	overflow:hidden;

}





.cs-index-feature::after{

	content:"";

	position:absolute;

	inset:0;

	background:

		linear-gradient(
			120deg,
			transparent,
			rgba(57,255,20,.12),
			transparent
		);

	transform:

		translateX(-120%);

	transition:

		.6s ease;

}





.cs-index-feature:hover::after{

	transform:

		translateX(120%);

}







/* =========================================================
   BUTTON PULSE
========================================================= */


.cs-index-action-login{

	animation:

		csLoginPulse 3s ease-in-out infinite;

}





@keyframes csLoginPulse{


	0%,
	100%{

		box-shadow:

		0 0 25px rgba(57,255,20,.25);

	}


	50%{

		box-shadow:

		0 0 40px rgba(57,255,20,.45);

	}

}







/* =========================================================
   SERVER ONLINE PULSE
========================================================= */


.cs-server-status i{

	animation:

		csOnlinePulse 1.8s infinite;

}





@keyframes csOnlinePulse{


	0%{

		box-shadow:

		0 0 0 0 rgba(57,255,20,.7);

	}


	70%{

		box-shadow:

		0 0 0 8px rgba(57,255,20,0);

	}


	100%{

		box-shadow:

		0 0 0 0 rgba(57,255,20,0);

	}

}

/* =========================================================
   CS Grăsuții România
   INDEX PREMIUM V9.2

   HERO CARD POLISH
========================================================= */


/* =========================================================
   HERO POSITION POLISH
========================================================= */


.cs-index-hero{

	margin-top:

		-25px;

}





/* =========================================================
   HERO SEPARATOR GLOW UPGRADE
========================================================= */


.cs-index-hero::after{

	bottom:

		-18px;

	height:

		2px;

	background:

		linear-gradient(
			90deg,
			transparent 0%,
			rgba(57,255,20,.15) 15%,
			#39ff14 50%,
			rgba(57,255,20,.15) 85%,
			transparent 100%
		);

	box-shadow:

		0 0 20px rgba(57,255,20,.55);

}





/* =========================================================
   COMMUNITY CARD PREMIUM
========================================================= */


.cs-community-card{

	padding:

		24px !important;

}





.cs-community-card > i{

	width:

		50px;

	height:

		50px;

	display:flex;

	align-items:center;

	justify-content:center;

	margin-bottom:

		16px;

	border-radius:

		16px;

	background:

		rgba(57,255,20,.14);

	border:

		1px solid rgba(57,255,20,.40);

	color:

		#39ff14;

	font-size:

		22px;

	box-shadow:

		0 0 25px rgba(57,255,20,.20);

}





.cs-community-card strong{

	display:block;

	color:

		#ffffff;

	font-size:

		19px;

	font-weight:

		950;

	margin-bottom:

		16px;

}





.cs-community-card span{

	display:flex;

	flex-direction:column;

	gap:

		12px;

}





.cs-community-card span br{

	display:none;

}





.cs-community-card span i{

	display:inline-flex;

	align-items:center;

	gap:

		8px;

	color:

		#39ff14;

}





.cs-community-card span{

	color:

		rgba(255,255,255,.65);

	font-size:

		13px;

	line-height:

		1.5;

}






/* =========================================================
   COMMUNITY CARD HOVER
========================================================= */


.cs-community-card:hover{

	border-color:

		rgba(57,255,20,.40);

	box-shadow:

		0 25px 60px rgba(0,0,0,.35),
		0 0 30px rgba(57,255,20,.08);

}