*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Inter',sans-serif;
}

body{
	min-height:100vh;
	color:#fff;
	background-color:#0a0a14;
	background:
		linear-gradient(rgba(10,10,20,0.88), rgba(10,10,20,0.92)),
		url('./images/bg.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}

body.modal-open{
	overflow:hidden;
}

/* HEADER */
header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	z-index:1000;
	padding:20px 8%;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}

.logo{
	font-size:22px;
	font-weight:600;
	letter-spacing:2px;
}

nav{
	display:flex;
	align-items:center;
	gap:12px;
}

.nav-links{
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px;
	border:1px solid rgba(255,255,255,0.14);
	border-radius:999px;
	background:rgba(14,18,32,0.62);
	box-shadow:0 8px 24px rgba(0,0,0,0.28);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}

.nav-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:36px;
	padding:0 14px;
	border-radius:999px;
	color:#d2d8ef;
	text-decoration:none;
	font-size:13px;
	font-weight:600;
	letter-spacing:0.03em;
	transition:background-color 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible{
	color:#fff;
	background:linear-gradient(135deg,rgba(88,101,242,0.42),rgba(123,92,255,0.34));
	box-shadow:
		0 0 0 1px rgba(193,201,255,0.24) inset,
		0 6px 16px rgba(88,101,242,0.2);
	transform:translateY(-1px);
	outline:none;
}

/* USER MENU */
.user-menu{
	position:relative;
	margin-left:30px;
	z-index:1100;
}

.user-icon{
	width:38px;
	height:38px;
	border-radius:50%;
	background:linear-gradient(135deg,#5865f2,#7b5cff);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-weight:600;
	transition:0.3s;
}

.user-icon:hover{
	transform:scale(1.07);
}

.dropdown{
	position:absolute;
	right:0;
	top:52px;
	background:rgba(20,20,35,0.95);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	border-radius:12px;
	width:190px;
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	transform:translateY(-10px);
	transition:0.25s ease;
	box-shadow:0 15px 35px rgba(0,0,0,0.4);
	z-index:1200;
}

.dropdown a{
	display:block;
	padding:13px 16px;
	margin-left:0;
	color:#ccc;
	text-decoration:none;
	font-size:14px;
	transition:0.2s;
}

.dropdown a:hover{
	background:rgba(255,255,255,0.05);
	color:#fff;
}

.dropdown.active{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
	header{
		background:rgba(10,12,24,0.82);
	}

	.nav-links{
		background:rgba(14,18,32,0.86);
	}

	.dropdown{
		background:rgba(20,20,35,0.98);
	}

	.hero .hero-description{
		background:rgba(88,101,242,0.3);
	}

	.login-modal,
	.register-modal{
		background:rgba(5,7,15,0.82);
	}
}

/* HERO */
.hero{
	text-align:center;
	padding:50px 20px 46px;
}

.hero .hero-title{
	display:inline-block;
	font-family:'Orbitron','Inter',sans-serif;
	font-size:56px;
	font-size:clamp(42px,8vw,74px);
	line-height:1.04;
	letter-spacing:0.06em;
	text-transform:uppercase;
	font-weight:700;
	margin-bottom:18px;
	color:#f8fbff;
	text-shadow:0 0 28px rgba(88,101,242,0.3);
	animation:heroTitleIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
	.hero .hero-title{
		background:linear-gradient(90deg,#f8fbff 0%,#b8c7ff 45%,#d8c5ff 100%);
		background-size:220% auto;
		-webkit-background-clip:text;
		background-clip:text;
		color:transparent;
		animation:
			heroTitleIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both,
			heroTitleShine 4.2s linear 1s infinite;
	}
}

.hero .hero-description{
	display:inline-block;
	padding:10px 18px;
	margin:0 auto 14px;
	border:1px solid rgba(160,176,255,0.6);
	border-radius:999px;
	background:linear-gradient(135deg,rgba(88,101,242,0.24),rgba(123,92,255,0.16));
	color:#f3f6ff;
	font-size:12px;
	line-height:1.65;
	font-weight:700;
	letter-spacing:0.18em;
	text-transform:uppercase;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.12) inset,
		0 10px 26px rgba(88,101,242,0.3);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	animation:mottoGlow 0.9s ease-in-out 1.1s 3;
}

.hero .hero-subtext{
	color:#9aa0b5;
	font-size:13px;
	line-height:1.5;
	max-width:760px;
	margin:0 auto 38px;
}

@keyframes heroTitleIn{
	0%{
		opacity:0;
		transform:translateY(18px) scale(0.97);
		filter:blur(6px);
	}
	100%{
		opacity:1;
		transform:translateY(0) scale(1);
		filter:blur(0);
	}
}

@keyframes heroTitleShine{
	0%{
		background-position:0% 50%;
	}
	100%{
		background-position:100% 50%;
	}
}

@keyframes mottoGlow{
	0%,
	100%{
		box-shadow:
			0 0 0 1px rgba(255,255,255,0.12) inset,
			0 10px 26px rgba(88,101,242,0.3);
	}
	50%{
		box-shadow:
			0 0 0 1px rgba(255,255,255,0.16) inset,
			0 0 20px rgba(123,92,255,0.45),
			0 12px 30px rgba(88,101,242,0.36);
	}
}

.buttons{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
}

.buttons-admin{
	margin-top:18px;
}

.buttons .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
}

.discord-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position:relative;
	margin:0;
	width:52px;
	height:52px;
	padding:0;
	border-radius:14px;
	border:1px solid rgba(88,101,242,0.55);
	background:rgba(88,101,242,0.18);
	color:#dfe5ff;
	text-decoration:none;
	transition:0.25s ease;
}

.discord-cta svg{
	position:absolute;
	left:50%;
	top:50%;
	width:24px;
	height:24px;
	transform:translate(-50%,-50%);
	display:block;
	fill:currentColor;
	pointer-events:none;
}

.discord-cta:hover{
	background:rgba(88,101,242,0.28);
	border-color:rgba(123,92,255,0.85);
	transform:translateY(-2px);
}

.btn{
	padding:12px 30px;
	border-radius:30px;
	text-decoration:none;
	font-weight:500;
	transition:0.3s;
	font-size:14px;
}

.btn-primary{
	background:linear-gradient(90deg,#5865f2,#7b5cff);
	color:white;
}

.btn-secondary{
	border:1px solid rgba(255,255,255,0.2);
	color:#ddd;
	background:rgba(255,255,255,0.05);
}

.btn:hover{
	transform:translateY(-3px);
}

/* SERVERS */
.section{
	padding:70px 8%;
}

#servers.section{
	padding-top:34px;
}

.grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:30px;
}

@supports not (display:grid){
	.grid{
		display:flex;
		flex-direction:column;
		gap:20px;
	}
}

.card{
	position:relative;
	border-radius:18px;
	overflow:hidden;
	background-clip:padding-box;
	min-height:230px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding:25px;
	background-size:cover;
	background-position:center;
	transition:0.4s;
}

.card-highlight{
	will-change:transform,filter,box-shadow;
}

.card-highlight.first{
	animation:
		cardSpotlightIn 1s cubic-bezier(0.22,1,0.36,1) 0.2s both,
		cardSpotlightPulse 1.6s ease-in-out 1.2s 2;
}

.card-highlight.second{
	animation:
		cardSpotlightIn 1s cubic-bezier(0.22,1,0.36,1) 0.65s both,
		cardSpotlightPulse 1.6s ease-in-out 1.65s 2;
}

@keyframes cardSpotlightIn{
	0%{
		transform:scale(0.94);
		filter:saturate(0.7) brightness(0.8);
		box-shadow:0 0 0 rgba(0,0,0,0);
	}
	65%{
		transform:scale(1.04);
		filter:saturate(1.2) brightness(1.1);
		box-shadow:0 16px 34px rgba(88,101,242,0.35);
	}
	100%{
		transform:scale(1);
		filter:saturate(1) brightness(1);
		box-shadow:0 10px 24px rgba(88,101,242,0.2);
	}
}

@keyframes cardSpotlightPulse{
	0%,
	100%{
		box-shadow:0 10px 24px rgba(88,101,242,0.2);
	}
	50%{
		box-shadow:
			0 0 0 2px rgba(123,92,255,0.75),
			0 0 28px rgba(123,92,255,0.55),
			0 12px 28px rgba(88,101,242,0.25);
	}
}

.card::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:linear-gradient(to top,rgba(0,0,0,0.85),rgba(0,0,0,0.25));
}

.card a{
	position:relative;
	z-index:2;
}

.card:hover{
	transform:translateY(-6px);
}

.server-title{
	font-family:'Orbitron','Inter',sans-serif;
	font-size:20px;
	font-weight:700;
	letter-spacing:0.12em;
	text-transform:uppercase;
	text-shadow:
		0 0 2px rgba(255,255,255,0.25),
		0 0 14px rgba(123,92,255,0.45);
}

.card-account{
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:12px;
	overflow:visible;
}

.account-btn{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:120px;
	gap:6px;
	text-align:center;
	border-radius:16px;
}

.account-btn h3{
	margin:0;
	font-size:22px;
	color:#fff;
}

.server-subtitle{
	margin:0;
	font-size:11px;
	font-weight:600;
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:rgba(226,233,255,0.88);
	text-shadow:0 0 10px rgba(0,0,0,0.55);
}

.rss-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.2);
	background:rgba(255,140,0,0.2);
	color:#ffac3e;
	text-decoration:none;
	transition:0.2s ease;
}

.rss-link svg{
	width:22px;
	height:22px;
	fill:currentColor;
}

.rss-link--tiktok{
	background:#101014;
	background-image:linear-gradient(145deg, rgba(18,19,24,0.96), rgba(7,8,11,0.96));
	border-color:rgba(255,255,255,0.32);
	color:#ffffff;
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,0.45),
		0 0 0 1px rgba(37,244,238,0.2),
		0 0 10px rgba(254,44,85,0.18);
}

.rss-link--tiktok .tiktok-icon{
	width:20px;
	height:20px;
	display:block;
	transform:translateX(-0.8px);
	overflow:visible;
}

.rss-link--tiktok .tiktok-icon path{
	transform-box:fill-box;
	transform-origin:center;
}

.rss-link--tiktok .tiktok-icon-shadow-cyan{
	fill:#25f4ee;
	transform:translate(-0.75px, 0.5px);
}

.rss-link--tiktok .tiktok-icon-shadow-pink{
	fill:#fe2c55;
	transform:translate(0.75px, -0.5px);
}

.rss-link--tiktok .tiktok-icon-main{
	fill:#ffffff;
}

.rss-link:hover{
	background:rgba(255,140,0,0.34);
	color:#ffd08c;
	transform:translateY(-2px);
}

.rss-link.rss-link--tiktok:hover,
.rss-link.rss-link--tiktok:focus-visible,
.rss-link.rss-link--tiktok:focus{
	background:#181922;
	background-image:linear-gradient(145deg, rgba(27,29,37,0.96), rgba(9,10,15,0.96));
	color:#ffffff;
	border-color:rgba(255,255,255,0.54);
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,0.52),
		0 0 0 1px rgba(37,244,238,0.34),
		0 0 16px rgba(254,44,85,0.34);
}

.rss-menu{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	z-index:4;
}

.social-menus-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	z-index:4;
}

.rss-dropdown{
	position:absolute;
	top:calc(100% + 4px);
	bottom:auto;
	left:50%;
	min-width:120px;
	border-radius:11px;
	border:1px solid rgba(255,172,62,0.58);
	background:rgba(255,140,0,0.24);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	box-shadow:0 12px 26px rgba(0,0,0,0.35);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translate(-50%,-8px);
	transition:opacity 0.2s ease,visibility 0.2s ease,transform 0.2s ease;
	overflow:hidden;
}

.rss-dropdown a{
	display:block;
	padding:9px 12px;
	color:#ffd08c;
	text-decoration:none;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	transition:0.2s ease;
}

.rss-dropdown a + a{
	border-top:1px solid rgba(255,255,255,0.16);
}

.rss-dropdown a:hover{
	background:rgba(255,140,0,0.28);
	color:#fff3dc;
}

.rss-menu--tiktok .rss-dropdown{
	border-color:rgba(254,44,85,0.5);
	background:rgba(10,11,15,0.88);
	box-shadow:
		0 12px 26px rgba(0,0,0,0.42),
		0 0 0 1px rgba(37,244,238,0.24);
}

.rss-menu--tiktok .rss-dropdown a{
	color:#effdff;
}

.rss-menu--tiktok .rss-dropdown a + a{
	border-top:1px solid rgba(255,255,255,0.12);
}

.rss-menu--tiktok .rss-dropdown a:hover{
	background:rgba(254,44,85,0.26);
	color:#ffffff;
}

.rss-menu.active .rss-dropdown{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translate(-50%,0);
}

.card a.server-status-link{
	position:absolute;
	right:14px;
	bottom:14px;
	z-index:3;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.24);
	text-decoration:none;
	transition:0.2s ease;
}

.server-status-link svg{
	width:14px;
	height:14px;
	fill:currentColor;
}

.server-status-link.is-up{
	background:rgba(32,150,95,0.28);
	color:#8ef7bd;
	border-color:rgba(142,247,189,0.6);
}

.server-status-link.is-up:hover{
	background:rgba(32,150,95,0.38);
	color:#d5ffe7;
	transform:translateY(-1px);
}

.server-status-link.is-down{
	background:rgba(169,42,61,0.28);
	color:#ff9ead;
	border-color:rgba(255,158,173,0.58);
}

.server-status-link.is-down:hover{
	background:rgba(169,42,61,0.38);
	color:#ffd9df;
	transform:translateY(-1px);
}

/* AUTH MODALS */
.login-modal,
.register-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(5,7,15,0.68);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.25s ease,visibility 0.25s ease;
	z-index:1200;
}

.login-modal.active,
.register-modal.active{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.login-modal__dialog{
	position:relative;
	width:92vw;
	max-width:420px;
	padding:24px;
	border-radius:16px;
	border:1px solid rgba(160,176,255,0.25);
	background:rgba(17,20,35,0.95);
	box-shadow:0 25px 60px rgba(0,0,0,0.5);
}

.login-modal__close{
	position:absolute;
	top:10px;
	right:10px;
	width:34px;
	height:34px;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,0.08);
	color:#cdd6ff;
	font-size:20px;
	line-height:1;
	cursor:pointer;
	transition:0.2s ease;
}

.login-modal__close:hover{
	background:rgba(255,255,255,0.16);
	color:#fff;
}

.login-modal__title{
	margin-bottom:16px;
	font-size:24px;
	font-weight:600;
	color:#f4f7ff;
}

.login-form{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.login-form label{
	text-align:left;
	font-size:13px;
	color:#b7bfdc;
}

.login-form__aux{
	margin:0;
	text-align:right;
	font-size:13px;
}

.login-form__aux a{
	color:#e4eaff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.login-form__aux a:hover{
	color:#ffffff;
}

.login-form__aux a:focus-visible{
	outline:2px solid rgba(123,92,255,0.65);
	outline-offset:2px;
	border-radius:4px;
}

/* GLOBAL FORM CONTROLS */
select{
	max-width:100%;
	min-height:44px;
	padding:0 34px 0 12px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,0.18);
	background-color:rgba(255,255,255,0.06);
	background-image:
		linear-gradient(45deg,transparent 50%,#dbe3ff 50%),
		linear-gradient(135deg,#dbe3ff 50%,transparent 50%);
	background-position:
		calc(100% - 16px) calc(50% + 1px),
		calc(100% - 11px) calc(50% + 1px);
	background-size:5px 5px,5px 5px;
	background-repeat:no-repeat;
	color:#fff;
	outline:none;
	cursor:pointer;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

select:focus{
	border-color:rgba(123,92,255,0.8);
	box-shadow:0 0 0 3px rgba(123,92,255,0.2);
}

select:disabled{
	opacity:0.65;
	cursor:not-allowed;
}

select::-ms-expand{
	display:none;
}

select option,
select optgroup{
	color:#111426;
	background:#f3f6ff;
}

select[multiple],
select[size]:not([size="1"]){
	padding-right:12px;
	background-image:none;
}

input[type="checkbox"]{
	width:18px;
	height:18px;
	min-width:18px;
	margin:0;
	border:1px solid rgba(179,191,245,0.62);
	border-radius:4px;
	background:rgba(255,255,255,0.05);
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
	display:inline-grid;
	place-content:center;
	vertical-align:middle;
	cursor:pointer;
	transition:background-color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

input[type="checkbox"]::before{
	content:"";
	width:5px;
	height:9px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg) scale(0);
	transform-origin:center;
	transition:transform 0.16s ease;
}

input[type="checkbox"]:checked{
	border-color:#8f7bff;
	background:linear-gradient(135deg,#5865f2,#7b5cff);
	box-shadow:0 0 0 2px rgba(123,92,255,0.22);
}

input[type="checkbox"]:checked::before{
	transform:rotate(45deg) scale(1);
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible{
	outline:2px solid rgba(143,123,255,0.75);
	outline-offset:2px;
}

input[type="checkbox"]:disabled{
	opacity:0.6;
	cursor:not-allowed;
}

@media(forced-colors:active){
	input[type="checkbox"]{
		-webkit-appearance:auto;
		-moz-appearance:auto;
		appearance:auto;
	}

	input[type="checkbox"]::before{
		content:none;
	}
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"]{
	width:100%;
	min-height:44px;
	padding:0 12px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,0.18);
	background:rgba(255,255,255,0.06);
	color:#fff;
	outline:none;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus,
.login-form input[type="email"]:focus{
	border-color:rgba(123,92,255,0.8);
	box-shadow:0 0 0 3px rgba(123,92,255,0.2);
}

/* GLOBAL PLACEHOLDERS */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder{
	color:rgba(210,221,255,0.78);
	letter-spacing:0.08em;
	font-size:12px;
	font-weight:500;
	opacity:1;
}

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	color:rgba(210,221,255,0.78);
	letter-spacing:0.08em;
	font-size:12px;
	font-weight:500;
}

input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="search"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
textarea::-moz-placeholder{
	color:rgba(210,221,255,0.78);
	letter-spacing:0.08em;
	font-size:12px;
	font-weight:500;
	opacity:1;
}

input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
textarea:-ms-input-placeholder{
	color:rgba(210,221,255,0.78);
	letter-spacing:0.08em;
	font-size:12px;
	font-weight:500;
}

input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder,
input[type="search"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="url"]::-ms-input-placeholder,
input[type="number"]::-ms-input-placeholder,
textarea::-ms-input-placeholder{
	color:rgba(210,221,255,0.78);
	letter-spacing:0.08em;
	font-size:12px;
	font-weight:500;
}

.login-otp-toggle{
	display:inline-flex;
	align-items:center;
	gap:8px;
	align-self:flex-start;
	min-height:38px;
	padding:7px 12px;
	margin:2px 0 0;
	border:1px solid rgba(160,176,255,0.38);
	border-radius:999px;
	background:rgba(77,96,168,0.28);
	color:#dce4ff;
	font-size:13px;
	font-weight:600;
	line-height:1;
	letter-spacing:0.02em;
	-webkit-tap-highlight-color:transparent;
	cursor:pointer;
	transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease,transform 0.2s ease;
}

.login-otp-toggle__icon{
	width:20px;
	height:20px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(112,131,210,0.35);
	color:#f4f7ff;
	flex:0 0 auto;
}

.login-otp-toggle__icon svg{
	width:13px;
	height:13px;
	display:block;
}

.login-otp-toggle__text{
	display:inline-block;
	white-space:nowrap;
}

.login-otp-toggle:hover,
.login-otp-toggle:focus-visible{
	color:#eef3ff;
	border-color:rgba(149,163,255,0.75);
	background:rgba(96,116,198,0.34);
	transform:translateY(-1px);
}

.login-otp-toggle:focus{
	outline:none;
}

.login-otp-toggle[aria-expanded="true"]{
	border-color:rgba(123,92,255,0.92);
	background:rgba(92,77,189,0.4);
	color:#ffffff;
}

.login-otp-toggle[aria-expanded="true"] .login-otp-toggle__icon{
	background:rgba(123,92,255,0.52);
}

.login-otp-row{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.login-otp-row.is-hidden{
	display:none;
}

.login-otp-row label{
	font-size:12px;
	color:#b9c3e6;
}

.login-otp-row input[name="otp_code"]{
	letter-spacing:0.12em;
	font-variant-numeric:tabular-nums;
}

.terms-row{
	display:flex;
	align-items:center;
	gap:10px;
}

.terms-row input[type="checkbox"]{
	flex:0 0 auto;
	margin:0;
}

.terms-row label{
	margin:0;
	line-height:1.4;
}

.terms-row label a{
	color:#d8e0ff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.login-form .terms-row{
	margin-top:2px;
}

.login-form .terms-row input[type="checkbox"]{
	margin-top:0;
}

.login-form .terms-row label{
	font-size:12px;
	color:#c8d1f5;
}

.login-form .btn{
	width:100%;
	margin-top:8px;
	border:none;
	cursor:pointer;
}

/* MESSAGE BOX */
.message-box{
	position:relative;
	width:100%;
	padding:12px 14px 12px 46px;
	border-radius:12px;
	border:1px solid rgba(143,176,255,0.45);
	background:rgba(36,53,95,0.38);
	text-align:left;
}

.hero-message{
	width:50%;
	margin:0 auto 16px;
}

.message-box::before{
	content:"i";
	position:absolute;
	left:12px;
	top:12px;
	width:22px;
	height:22px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-weight:700;
}

.message-box__title{
	margin:0 0 2px;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.message-box__text{
	margin:0;
	font-size:13px;
	line-height:1.45;
}

.message-box.form-message{
	margin-bottom:2px;
}

.message-box.is-hidden{
	display:none;
}

.message-box.info{
	border-color:rgba(143,176,255,0.45);
	background:rgba(36,53,95,0.38);
}

.message-box.info::before{
	content:"i";
	color:#d9e8ff;
	background:rgba(132,168,255,0.28);
}

.message-box.info .message-box__title{
	color:#e8f0ff;
}

.message-box.info .message-box__text{
	color:#c4d3f5;
}

.message-box.success{
	border-color:rgba(88,214,141,0.52);
	background:rgba(23,84,52,0.38);
}

.message-box.success::before{
	content:"OK";
	color:#cffff0;
	background:rgba(88,214,141,0.35);
	font-size:10px;
}

.message-box.success .message-box__title{
	color:#d9ffe8;
}

.message-box.success .message-box__text{
	color:#b6f1cb;
}

.message-box.warning{
	border-color:rgba(255,195,92,0.52);
	background:rgba(110,76,15,0.4);
}

.message-box.warning::before{
	content:"!";
	color:#fff5d6;
	background:rgba(255,195,92,0.36);
}

.message-box.warning .message-box__title{
	color:#ffefc4;
}

.message-box.warning .message-box__text{
	color:#ffd898;
}

.message-box.error{
	border-color:rgba(255,107,126,0.55);
	background:rgba(103,23,36,0.42);
}

.message-box.error::before{
	content:"X";
	color:#ffdce1;
	background:rgba(255,107,126,0.34);
}

.message-box.error .message-box__title{
	color:#ffe0e5;
}

.message-box.error .message-box__text{
	color:#ffc0c9;
}

/* FOOTER */
footer{
	text-align:center;
	padding:40px 20px;
	color:#888;
	font-size:14px;
}

@media(max-width:768px){
	header{
		padding:14px 16px;
		gap:10px;
	}

	.logo{
		font-size:18px;
	}

	nav{
		flex-wrap:wrap;
		justify-content:flex-end;
		gap:8px;
	}

	.nav-links{
		padding:4px;
		gap:6px;
	}

	.nav-link{
		min-height:34px;
		padding:0 11px;
		font-size:12px;
	}

	.user-menu{
		margin-left:0;
	}

	.hero{
		padding:72px 16px 44px;
	}

	.hero .hero-title{
		font-size:42px;
		font-size:clamp(34px,12vw,50px);
		letter-spacing:0.04em;
		margin-bottom:14px;
	}

	.hero .hero-description{
		font-size:11px;
		letter-spacing:0.14em;
		padding:9px 14px;
	}

	.hero .hero-subtext{
		font-size:12px;
		margin-bottom:28px;
	}

	.server-title{
		font-size:17px;
		letter-spacing:0.09em;
	}

	.server-subtitle{
		font-size:10px;
		letter-spacing:0.13em;
	}

	.rss-link{
		width:36px;
		height:36px;
	}

	.rss-link svg{
		width:20px;
		height:20px;
	}

	.rss-dropdown{
		top:calc(100% + 3px);
	}

	.rss-dropdown a{
		font-size:11px;
		padding:8px 11px;
	}

	.card a.server-status-link{
		right:12px;
		bottom:12px;
		width:26px;
		height:26px;
	}

	.server-status-link svg{
		width:12px;
		height:12px;
	}

	.buttons{
		flex-direction:column;
		align-items:center;
		gap:12px;
	}

	.buttons .btn{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		min-height:44px;
		width:100%;
		max-width:340px;
	}

	.hero-message{
		width:100%;
	}

	.discord-cta{
		width:52px;
		height:52px;
	}

	.login-modal__dialog{
		padding:20px 16px;
	}

	.login-modal__title{
		font-size:22px;
	}

	.section{
		padding:48px 16px;
	}

	#servers.section{
		padding-top:22px;
	}

	.card{
		min-height:180px;
		padding:18px;
	}

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

	.dropdown{
		width:90vw;
		max-width:190px;
		background:rgba(20,20,35,0.99);
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}
}

@media(hover:none){
	.nav-link:hover{
		transform:none;
	}

	.btn:hover,
	.card:hover,
	.discord-cta:hover,
	.rss-link:hover,
	.server-status-link:hover{
		transform:none;
	}
}

@media(prefers-reduced-motion:reduce){
	.card-highlight.first,
	.card-highlight.second,
	.hero .hero-title,
	.hero .hero-description,
	.login-modal,
	.register-modal{
		animation:none;
	}

	.login-modal,
	.register-modal{
		transition:none;
	}
}

/* ACCOUNT PAGE */
.hero-account{
	padding-top:38px;
	padding-bottom:24px;
}

.hero-account .hero-title{
	font-size:clamp(34px,7vw,58px);
	margin-bottom:14px;
}

.hero-account .hero-description{
	display:inline-block;
	max-width:100%;
	margin:0 auto 14px;
	padding:12px 22px 14px;
	line-height:1.65;
	text-align:center;
	border-radius:20px;
	white-space:normal;
	word-break:break-word;
	overflow-wrap:anywhere;
}

.hero-account .hero-subtext{
	max-width:560px;
	margin-bottom:0;
}

.account-section{
	padding-top:16px;
	padding-bottom:56px;
}

.account-shell{
	max-width:980px;
	margin:0 auto;
}

.account-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px;
}

.account-panel{
	border:1px solid rgba(160,176,255,0.24);
	border-radius:16px;
	padding:20px;
	background:rgba(17,20,35,0.9);
	box-shadow:0 20px 45px rgba(0,0,0,0.34);
	-webkit-backdrop-filter:blur(9px);
	backdrop-filter:blur(9px);
}

.account-panel--single{
	grid-column:1 / -1;
}

.account-panel__title{
	margin:0 0 14px;
	font-family:'Orbitron','Inter',sans-serif;
	font-size:18px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:#f2f6ff;
}

.account-form{
	gap:10px;
}

.account-actions{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:8px;
}

.account-actions .btn{
	flex:1;
	border:0;
	cursor:pointer;
}

.account-note{
	margin:0;
	color:#c4d0f3;
	font-size:14px;
	line-height:1.5;
}

.account-note a{
	color:#e4eaff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.account-otp-note{
	margin-top:10px;
}

.account-otp-actions{
	margin-top:12px;
}

.account-otp-box{
	margin-top:12px;
	padding:12px;
	border:1px solid rgba(255,255,255,0.14);
	border-radius:12px;
	background:rgba(8,12,26,0.62);
}

.account-otp-box.is-hidden{
	display:none;
}

.account-otp-secret{
	word-break:break-all;
}

.account-otp-secret code{
	display:inline-block;
	margin-left:6px;
	padding:2px 6px;
	border-radius:6px;
	background:rgba(255,255,255,0.08);
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:12px;
	color:#f2f6ff;
}

.account-otp-qr{
	display:block;
	width:160px;
	height:160px;
	max-width:100%;
	margin:10px auto 6px;
	border-radius:10px;
	background:#fff;
	padding:8px;
}

.account-back{
	margin-top:20px;
	text-align:center;
}

.account-back__link{
	min-height:40px;
	padding:0 16px;
}

.message-box{
	margin-bottom:16px;
}

@media(max-width:900px){
	.account-grid{
		grid-template-columns:1fr;
	}

	.account-panel--single{
		grid-column:auto;
	}
}

@media(max-width:768px){
	.hero-account{
		padding-top:26px;
		padding-bottom:18px;
	}

	.hero-account .hero-description{
		padding:11px 14px 13px;
		border-radius:16px;
	}

	.account-section{
		padding-top:8px;
	}

	.account-panel{
		padding:16px;
	}
}

@media(max-width:500px){
	.account-actions{
		flex-direction:column;
	}

	.account-actions .btn{
		width:100%;
	}
}

/* PREMIUM PAGE */
.hero-premium{
	padding-top:34px;
	padding-bottom:20px;
}

.hero-premium .hero-title{
	font-size:clamp(38px,7vw,62px);
	margin-bottom:12px;
}

.hero-premium .hero-description{
	margin-bottom:10px;
}

.hero-premium .hero-subtext{
	max-width:940px;
}

.premium-section{
	padding-top:14px;
	padding-bottom:56px;
}

.premium-shell{
	max-width:1220px;
	margin:0 auto;
}

.premium-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:18px;
}

.premium-panel{
	border:1px solid rgba(160,176,255,0.24);
	border-radius:16px;
	padding:20px;
	background:rgba(17,20,35,0.9);
	box-shadow:0 20px 45px rgba(0,0,0,0.34);
	-webkit-backdrop-filter:blur(9px);
	backdrop-filter:blur(9px);
}

.premium-panel--create{
	max-width:760px;
	margin:0 auto;
	width:100%;
}

.premium-panel--wide{
	width:100%;
	max-width:100%;
	min-width:0;
}

.premium-panel--wide .premium-table-wrap{
	max-width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	-ms-overflow-style:-ms-autohiding-scrollbar;
	scrollbar-width:thin;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
	.premium-panel--wide{
		background:#111426;
	}
}

.premium-panel__title{
	margin:0 0 14px;
	font-family:'Orbitron','Inter',sans-serif;
	font-size:18px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:#f2f6ff;
}

.premium-form{
	gap:10px;
}

.premium-field{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.premium-select{
	width:100%;
}

.premium-desc{
	margin-top:4px;
	margin-bottom:2px;
}

.premium-desc .message-box__text{
	white-space:pre-line;
}

.premium-terms{
	margin-top:8px;
}

.premium-terms label a{
	color:#d4dcff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.premium-actions{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:8px;
}

.premium-actions .btn{
	flex:1;
	border:0;
	cursor:pointer;
}

.premium-locked-note{
	margin:0;
	color:#c4d0f3;
	font-size:14px;
	line-height:1.55;
}

.premium-locked-note a{
	color:#e4eaff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.terms-panel{
	max-width:100%;
}

.terms-panel__intro{
	margin-bottom:12px;
}

.terms-frame-wrap{
	position:relative;
	width:100%;
	min-height:68vh;
	border:1px solid rgba(255,255,255,0.15);
	border-radius:12px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	background:rgba(8,11,24,0.72);
}

.terms-frame-wrap .ipsBox_alt{
	padding:20px 22px 24px;
}

.terms-frame-wrap .ipsType_normal,
.terms-frame-wrap .ipsType_richText,
.terms-content{
	color:#dbe3ff;
	font-size:clamp(14px,1.45vw,16px);
	line-height:1.72;
	letter-spacing:0.01em;
	-webkit-font-smoothing:antialiased;
}

.terms-frame-wrap .ipsType_richText p,
.terms-frame-wrap .ipsType_normal p,
.terms-content p{
	max-width:90ch;
	margin:0 auto;
}

.terms-frame-wrap .ipsType_richText br,
.terms-frame-wrap .ipsType_normal br{
	display:block;
	content:"";
	margin-bottom:0.34em;
}

.terms-content{
	min-height:68vh;
	padding:18px 18px 22px;
	word-break:break-word;
	overflow-wrap:anywhere;
}

.terms-content > *:first-child{
	margin-top:0;
}

.terms-content > *:last-child{
	margin-bottom:0;
}

.terms-content h1,
.terms-content h2,
.terms-content h3,
.terms-content h4,
.terms-content h5,
.terms-content h6{
	color:#ffffff;
	line-height:1.3;
	margin:1em 0 0.55em;
}

.terms-content p,
.terms-content ul,
.terms-content ol,
.terms-content blockquote,
.terms-content pre,
.terms-content table{
	margin:0 0 0.9em;
}

.terms-content ul,
.terms-content ol{
	padding-left:1.35em;
}

.terms-content a{
	color:#c9d4ff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.terms-content img{
	max-width:100%;
	height:auto;
	border-radius:8px;
}

.terms-content table{
	display:block;
	width:100%;
	max-width:100%;
	overflow-x:auto;
	border-collapse:collapse;
}

.terms-content th,
.terms-content td{
	padding:8px 10px;
	border:1px solid rgba(255,255,255,0.14);
	background:rgba(255,255,255,0.02);
}

.terms-fallback{
	margin-top:12px;
	text-align:center;
}

.terms-fallback .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:0 16px;
}

.premium-table-wrap{
	overflow-x:auto;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.15);
}

.premium-table{
	width:100%;
	border-collapse:collapse;
	min-width:980px;
	background:rgba(8,11,24,0.7);
}

.premium-table th,
.premium-table td{
	padding:9px 10px;
	border-bottom:1px solid rgba(255,255,255,0.12);
	text-align:center;
	font-size:12px;
	line-height:1.35;
}

.premium-table th{
	background:rgba(88,101,242,0.24);
	color:#f0f3ff;
	font-size:11px;
	letter-spacing:0.08em;
	text-transform:uppercase;
}

.premium-table tbody tr:nth-child(even){
	background:rgba(255,255,255,0.03);
}

.premium-table tbody tr:hover{
	background:rgba(123,92,255,0.14);
}

.premium-wrap-cell{
	white-space:normal;
	word-break:break-word;
}

.premium-actions-cell{
	white-space:nowrap;
}

.premium-actions-cell form{
	display:inline-flex;
	vertical-align:middle;
}

.premium-inline-link{
	color:#d6ddff;
	text-decoration:underline;
	text-underline-offset:2px;
}

.premium-inline-link:hover{
	color:#ffffff;
}

/* TEXT LINK STATES */
:root{
	--text-link-color:#d2dcff;
	--text-link-visited:#afbef8;
	--text-link-hover:#f4f7ff;
	--text-link-active:#ffffff;
	--text-link-underline:rgba(210,220,255,0.72);
	--text-link-underline-hover:rgba(255,255,255,0.98);
	--text-link-focus:rgba(143,123,255,0.8);
}

.terms-row label a,
.account-note a,
.premium-terms label a,
.premium-locked-note a,
.terms-frame-wrap a,
.terms-content a,
.message-box__text a,
.premium-inline-link{
	color:var(--text-link-color);
	text-decoration:underline;
	text-decoration-color:var(--text-link-underline);
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:color 0.2s ease,text-decoration-color 0.2s ease,text-shadow 0.2s ease;
}

.terms-row label a:visited,
.account-note a:visited,
.premium-terms label a:visited,
.premium-locked-note a:visited,
.terms-frame-wrap a:visited,
.terms-content a:visited,
.message-box__text a:visited,
.premium-inline-link:visited{
	color:var(--text-link-visited);
}

.terms-row label a:hover,
.account-note a:hover,
.premium-terms label a:hover,
.premium-locked-note a:hover,
.terms-frame-wrap a:hover,
.terms-content a:hover,
.message-box__text a:hover,
.premium-inline-link:hover,
.terms-row label a:focus-visible,
.account-note a:focus-visible,
.premium-terms label a:focus-visible,
.premium-locked-note a:focus-visible,
.terms-frame-wrap a:focus-visible,
.terms-content a:focus-visible,
.message-box__text a:focus-visible,
.premium-inline-link:focus-visible{
	color:var(--text-link-hover);
	text-decoration-color:var(--text-link-underline-hover);
	text-decoration-thickness:2px;
	text-shadow:0 0 12px rgba(123,92,255,0.38);
}

.terms-row label a:active,
.account-note a:active,
.premium-terms label a:active,
.premium-locked-note a:active,
.terms-frame-wrap a:active,
.terms-content a:active,
.message-box__text a:active,
.premium-inline-link:active{
	color:var(--text-link-active);
}

.terms-row label a:focus-visible,
.account-note a:focus-visible,
.premium-terms label a:focus-visible,
.premium-locked-note a:focus-visible,
.terms-frame-wrap a:focus-visible,
.terms-content a:focus-visible,
.message-box__text a:focus-visible,
.premium-inline-link:focus-visible{
	outline:2px solid var(--text-link-focus);
	outline-offset:2px;
	border-radius:4px;
}

.terms-row label a:focus,
.account-note a:focus,
.premium-terms label a:focus,
.premium-locked-note a:focus,
.terms-frame-wrap a:focus,
.terms-content a:focus,
.message-box__text a:focus,
.premium-inline-link:focus{
	outline:2px solid var(--text-link-focus);
	outline-offset:2px;
	border-radius:4px;
}

.premium-tool-row{
	display:flex;
	justify-content:center;
	margin-bottom:14px;
}

.send_button,
.reset_button{
	min-height:40px;
	padding:0 18px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	transition:0.2s ease;
}

.send_button{
	border:0;
	background:linear-gradient(90deg,#5865f2,#7b5cff);
	color:#fff;
}

.send_button:hover{
	transform:translateY(-1px);
	filter:brightness(1.05);
}

.reset_button{
	border:1px solid rgba(255,255,255,0.24);
	background:rgba(255,255,255,0.05);
	color:#d5ddf8;
}

.reset_button:hover{
	background:rgba(255,255,255,0.12);
}

.premium-back-link{
	margin-top:18px;
	text-align:center;
}

.premium-back-link .nav-link{
	min-height:40px;
	padding:0 16px;
}

.premium-message-text form{
	display:inline-flex;
	margin-left:6px;
	vertical-align:middle;
}

.premium-message-text img{
	display:block;
	max-height:38px;
	width:auto;
}

@media(max-width:900px){
	.premium-panel{
		padding:16px;
	}

	.premium-table{
		min-width:860px;
	}
}

@media(max-width:768px){
	.hero-premium{
		padding-top:24px;
		padding-bottom:14px;
	}

	.premium-section{
		padding-top:8px;
	}

	.premium-actions{
		flex-direction:column;
	}

	.premium-actions .btn{
		width:100%;
	}

	.premium-panel--wide{
		padding:14px 12px;
		border-radius:12px;
	}

	.premium-panel--wide .premium-panel__title{
		font-size:16px;
		letter-spacing:0.06em;
	}

	.premium-panel--wide .premium-table-wrap{
		border-radius:10px;
	}

	.terms-frame-wrap,
	.terms-content{
		min-height:64vh;
	}

	.premium-table{
		min-width:760px;
	}
}

@media(max-width:480px){
	.premium-panel--wide{
		padding:12px 10px;
	}

	.premium-panel--wide .premium-panel__title{
		font-size:15px;
		letter-spacing:0.04em;
	}

	.terms-frame-wrap,
	.terms-content{
		min-height:58vh;
	}

	.terms-frame-wrap .ipsBox_alt{
		padding:14px 12px 16px;
	}

	.terms-frame-wrap .ipsType_normal,
	.terms-frame-wrap .ipsType_richText{
		font-size:14px;
		line-height:1.66;
	}

	.terms-frame-wrap .ipsType_richText p,
	.terms-frame-wrap .ipsType_normal p{
		max-width:100%;
	}

	.terms-content{
		padding:14px 12px 16px;
		font-size:13px;
	}
}