/* =================================
------------------------------------
  Game Warrior Template
  Version: 0.1
 ------------------------------------ 
 ====================================*/

/* Main pages style */

* {
	box-sizing: border-box;
}

/* Hide scrollbar for Chrome, Safari and Edge */
div.left-container::-webkit-scrollbar {
	display: none;
}

div.center-container::-webkit-scrollbar {
	display: none;
}

div.right-container::-webkit-scrollbar {
	display: none;
}

div.link-container::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
div.left-container {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

div.center-container {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

div.right-container {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

div.link-container {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}


body {
	background-color: rgb(18, 17, 17);
	font-family: sans-serif;
	font-size: medium;
	color: rgb(140, 174, 174);
	line-height: 1.5em;
	text-align: center;
	padding: 5px;
}

b {
	color: burlywood;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
	div.flex-container {
		flex-direction: column;
	}

	.top-status-row {
		grid-template-columns: 1fr;
	}
}

/* Ends main layout */

/* Links, visited, touched, clicked, focused */

a:link {
	color: rgb(83, 134, 230);
}

a:visited {
	color: burlywood;
}

a:hover {
	color: burlywood;
}

a:active {
	color: crimson;
}

a:focus {
	color: darkcyan;
}

/* Paragraphs */

p {
	text-align: justify;
	margin: 5px;
}

/* Unordered lists */

ul li {
	font-family: 'Courier New', Courier, monospace;
	font-size: medium;
	font-weight: bold;
}

/* Main page layout of the webpages auto adjusts to single column under 600px */

div.flex-container {
	display: flex;
	/* Show the flex items horizontally */
	flex-direction: row;
	overflow-x: auto;
}

div.flex-container>div {
	margin: 5px;
	overflow-block: scroll;
}


/* Navigation */

.navigation-logo {
	background-image: url(../images/logo64x64.png);
	background-position: left top;
	background-repeat: no-repeat;
	border-radius: 15px;
	padding: 5px;
	width: 64px;
	height: 64px;
}

.link-container {
	text-align: center;
	width: calc(100% - 5px);
}

.top-status-row {
	display: grid;
	grid-template-columns: minmax(160px, 280px) minmax(180px, 1fr);
	align-items: stretch;
	gap: 8px;
	margin: 0 0 8px;
}

.rank-top-container {
	display: flex;
	justify-content: center;
	min-width: 0;
	margin: 0;
}

.rank-top-menu {
	position: relative;
	width: 100%;
	max-width: 280px;
}

.rank-top-trigger {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 6px 10px;
	color: #f8efe2;
	background-color: #1b1b1b;
	border: 1px solid #31373f;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 900;
	text-align: left;
	cursor: pointer;
	list-style: none;
}

.rank-top-trigger::-webkit-details-marker {
	display: none;
}

.rank-top-trigger:hover,
.rank-top-trigger:focus {
	background-color: #242424;
	border-color: #ffb320;
	outline: none;
}

.rank-top-trigger .rank-badge-small {
	width: 42px;
	height: 42px;
}

.rank-top-trigger span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rank-top-dropdown {
	display: grid;
	gap: 7px;
	width: 100%;
	margin-top: 8px;
	padding: 12px;
	color: #d3dddd;
	background-color: #101112;
	border: 1px solid #3f4651;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
	text-align: left;
}

.rank-top-dropdown a {
	justify-self: start;
	margin-top: 4px;
	color: #061018 !important;
	background-color: #ffb320;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 0.8rem;
	font-weight: 900;
	text-decoration: none;
}

.online-users-container {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 10px 14px;
	background-color: #1b1b1b;
	border: 2px solid #31373f;
	border-radius: 15px;
	overflow: hidden;
}

.top-notification-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin-right: 8px;
	color: var(--gw-muted, #aebbbb) !important;
	background: rgba(7, 10, 14, 0.7);
	border: 1px solid var(--gw-line, #31373f);
	border-radius: 50%;
	text-decoration: none;
}

.top-notification-bell:hover,
.top-notification-bell:focus {
	color: var(--gw-gold, #f2bd57) !important;
	border-color: var(--gw-gold, #f2bd57);
	outline: none;
}

.top-notification-icon {
	display: block;
	font-size: 1rem;
	line-height: 1;
	transform-origin: 50% 12%;
}

.top-notification-bell.has-unread {
	color: var(--gw-gold, #f2bd57) !important;
	border-color: rgba(242, 189, 87, 0.72);
	box-shadow: 0 0 14px rgba(242, 189, 87, 0.22);
}

.top-notification-bell.has-unread .top-notification-icon {
	animation: notification-bell-ring 2.4s ease-in-out infinite;
}

.top-notification-count {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	color: #061018;
	background: var(--gw-gold, #f2bd57);
	border: 2px solid #151d29;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 900;
	line-height: 1;
}

@keyframes notification-bell-ring {
	0%,
	84%,
	100% {
		transform: rotate(0);
	}

	88% {
		transform: rotate(18deg);
	}

	92% {
		transform: rotate(-16deg);
	}

	96% {
		transform: rotate(9deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-notification-bell.has-unread .top-notification-icon {
		animation: none;
	}
}

.online-users-label {
	flex: 0 0 auto;
	margin-right: 10px;
	color: burlywood;
	font-size: small;
	font-weight: bold;
	text-transform: uppercase;
}

.online-users-list {
	display: flex;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	padding: 8px 2px 8px 8px;
	margin: -8px 0 -8px -8px;
	white-space: nowrap;
	scrollbar-width: thin;
}

.online-user {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: white;
	font-family: 'Courier New', Courier, monospace;
	font-size: small;
	font-weight: bold;
}

.online-dot {
	display: inline-block;
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	background-color: #28e66f;
	border-radius: 50%;
	box-shadow: 0 0 0 rgba(40, 230, 111, 0.75);
	animation: online-dot-pulse 1.4s ease-out infinite;
}

@keyframes online-dot-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(40, 230, 111, 0.75);
	}

	70% {
		box-shadow: 0 0 0 7px rgba(40, 230, 111, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(40, 230, 111, 0);
	}
}

/* Styled unordered lists for navigation */

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #1b1b1b;
	border-radius: 15px;
	border: 2px solid #31373f;
	display: flex;
	justify-content: center;
}

ul li a {
	display: block;
	color: white;
	padding: 14px 16px;
	text-decoration: none;
	border-radius: 15px;
	font-size: x-large;
}

ul li a:hover {
	background-color: #494646;
	border-radius: 15px;
}

.rank-nav-item {
	min-width: 230px;
}

ul li a.rank-nav-link {
	padding: 8px 12px;
	font-size: medium;
	text-align: left;
}

.rank-nav-layout {
	display: grid;
	grid-template-columns: 42px 1fr;
	align-items: center;
	gap: 8px;
}

.rank-nav-details {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.rank-title {
	color: burlywood;
	font-size: small;
	text-transform: uppercase;
}

.rank-count {
	color: rgb(140, 174, 174);
	font-size: small;
}

.rank-timer {
	color: white;
	font-size: small;
}

.rank-cooldown {
	color: burlywood;
	font-size: small;
}

.rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	object-fit: contain;
	background-color: #0f1012;
	border: 1px solid #31373f;
	border-radius: 8px;
	color: burlywood;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	line-height: 1;
}

.rank-badge-small {
	width: 42px;
	height: 42px;
	font-size: large;
}

.rank-badge-large {
	width: 128px;
	height: 128px;
	margin: 0 auto;
	font-size: xxx-large;
}

.rank-badge-list {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	font-size: large;
	vertical-align: middle;
}

.rank-badge-wrap {
	text-align: center;
}

.rank-meter,
.rank-progress {
	display: block;
	width: 100%;
	height: 8px;
	overflow: hidden;
	background-color: #0f1012;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.rank-meter span,
.rank-progress span {
	display: block;
	height: 100%;
	background-color: rgb(83, 134, 230);
}

.rank-page {
	padding: 25px;
}

.rank-panel {
	max-width: 560px;
	margin: 0 auto 25px;
	text-align: left;
}

.rank-panel h2,
.rank-page h3 {
	color: burlywood;
	text-align: center;
}

.rank-user-name {
	margin: 10px 0 0;
	color: white;
	font-size: large;
	font-weight: bold;
	text-align: center;
	overflow-wrap: anywhere;
}

.rank-list {
	display: block;
	max-width: 560px;
	margin: 0 auto;
	padding: 15px 30px;
	text-align: left;
}

.rank-list li {
	display: flex;
	align-items: center;
	margin: 8px 0;
}

.session-check-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(18, 17, 17, 0.88);
	z-index: 2000;
}

.session-check-overlay.is-visible {
	display: flex;
}

.session-check-box {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	color: burlywood;
	background-color: #1b1b1b;
	border: 2px solid #31373f;
	border-radius: 8px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.session-check-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #31373f;
	border-top-color: rgb(83, 134, 230);
	border-radius: 50%;
	animation: session-check-spin 0.8s linear infinite;
}

@keyframes session-check-spin {
	to {
		transform: rotate(360deg);
	}
}

/* End of navigation container */

/* Blog */

.blog-page {
	padding-bottom: 70px;
}

.blog-container {
	width: min(100%, 1120px);
	height: auto;
	min-height: calc(85vh + 50px);
	padding: 28px;
	overflow: auto;
	text-align: left;
	background:
		linear-gradient(135deg, rgba(255, 179, 32, 0.08), rgba(83, 134, 230, 0.06) 45%, rgba(27, 27, 27, 0) 76%),
		#151515;
}

.blog-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	align-items: end;
	gap: 24px;
	max-width: 920px;
	margin: 0 auto 24px;
	padding: 28px;
	background-color: rgba(34, 34, 34, 0.9);
	border: 1px solid #3f4651;
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.blog-kicker,
.blog-section-heading span,
.blog-post-topline {
	color: #ffb320;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blog-hero h2 {
	margin: 8px 0 10px;
	color: #f8efe2;
	font-size: 2.6rem;
	line-height: 1.08;
	text-align: left;
}

.blog-hero p {
	max-width: 640px;
	margin: 0;
	color: #c7d3d3;
	font-size: 1.02rem;
	text-align: left;
}

.blog-stat {
	display: grid;
	place-items: center;
	min-height: 118px;
	padding: 18px;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
	text-align: center;
}

.blog-stat span {
	color: #ffb320;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.blog-stat small {
	color: #c7d3d3;
	font-weight: 700;
	text-transform: uppercase;
}

.blog-notice {
	max-width: 920px;
	margin: 0 auto 16px;
	padding: 12px 14px;
	border-radius: 6px;
	text-align: center;
}

.blog-primary-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 920px;
	margin: 0 auto 16px;
	padding: 8px;
	background-color: rgba(7, 10, 14, 0.78);
	border: 1px solid #3f4651;
	border-radius: 10px;
}

.blog-primary-actions a,
.blog-primary-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 14px;
	color: #c7d3d3 !important;
	background: transparent !important;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 0.84rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.blog-primary-actions a:first-child {
	color: #061018 !important;
	background: linear-gradient(135deg, #49d7ff, #f2bd57) !important;
	border-color: #ffe2a1;
}

.blog-primary-actions a:hover,
.blog-primary-actions button:hover,
.blog-primary-actions button:focus,
.blog-primary-actions button[aria-expanded="true"] {
	color: #f8efe2 !important;
	background: rgba(73, 215, 255, 0.12) !important;
	border-color: #3f4651;
	outline: none;
	transform: none;
}

.blog-disclosure-ready [data-blog-disclosure][hidden],
.blog-disclosure-ready [data-blog-disclosure-content][hidden] {
	display: none !important;
}

[data-blog-disclosure] {
	scroll-margin-top: 18px;
}

.blog-tools {
	display: grid;
	gap: 14px;
	max-width: 920px;
	margin: 0 auto 20px;
	padding: 18px;
	background-color: rgba(16, 17, 18, 0.9);
	border: 1px solid #3f4651;
	border-radius: 8px;
}

.blog-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
	align-items: center;
	gap: 18px;
	max-width: 920px;
	margin: 0 auto 20px;
	padding: 22px;
	background-color: rgba(34, 34, 34, 0.96);
	border: 1px solid #3f4651;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.blog-newsletter h3 {
	margin: 6px 0 8px;
	color: #f8efe2;
	font-size: 1.45rem;
	text-align: left;
}

.blog-newsletter p {
	margin: 0;
	color: #c7d3d3;
	text-align: left;
}

.blog-newsletter form {
	display: grid;
	gap: 8px;
}

.blog-newsletter label {
	margin: 0;
	color: #dbc39f;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.blog-newsletter input {
	width: 100%;
	padding: 12px 14px;
	color: white;
	background-color: #101112;
	border: 1px solid #3f4651;
	border-radius: 6px;
	font-size: 1rem;
}

.blog-newsletter input:focus {
	border-color: #ffb320;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 179, 32, 0.12);
}

.blog-newsletter-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.blog-newsletter button {
	min-height: 46px;
	padding: 12px 18px;
	color: #111;
	background-color: #ffb320;
	border: none;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}

.blog-newsletter button:hover {
	background-color: #ffd06c;
	transform: translateY(-1px);
}

.blog-newsletter-notice {
	margin-top: 4px;
	text-align: center;
}

.blog-search-form {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto auto;
	align-items: end;
	gap: 10px;
}

.blog-search-form label {
	display: grid;
	gap: 6px;
	color: #dbc39f;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.blog-search-form input,
.blog-search-form select {
	width: 100%;
	padding: 11px 12px;
	color: white;
	background-color: #101112;
	border: 1px solid #3f4651;
	border-radius: 6px;
	text-transform: none;
}

.blog-search-form button,
.blog-search-form a,
.blog-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	color: #111 !important;
	background-color: #ffb320;
	border: 0;
	border-radius: 6px;
	font-weight: 800;
	text-decoration: none;
}

.blog-search-form a,
.blog-actions a {
	color: white !important;
	background-color: #31373f;
	border: 1px solid #4f5966;
}

.blog-toc {
	padding-top: 12px;
	border-top: 1px solid #31373f;
}

.blog-toc summary {
	color: #ffb320;
	font-size: 0.78rem;
	font-weight: 800;
	cursor: pointer;
	text-transform: uppercase;
}

.blog-toc ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
	margin: 10px 0 0;
	padding-left: 20px;
}

.blog-toc a {
	color: #d3dddd;
	text-decoration: none;
}

.blog-toc a:hover {
	color: #ffb320;
}

.blog-editor,
.blog-post {
	max-width: 920px;
	margin: 0 auto 20px;
	padding: 22px;
	background-color: rgba(34, 34, 34, 0.96);
	border: 1px solid #3f4651;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.blog-section-heading {
	margin: 0 auto 16px;
	max-width: 920px;
}

.blog-section-heading h3 {
	margin: 4px 0 0;
	color: #f8efe2;
	font-size: 1.45rem;
	text-align: left;
}

.blog-editor form {
	display: grid;
	gap: 10px;
}

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

.blog-editor label {
	margin: 0;
	color: #dbc39f;
	font-size: 0.86rem;
	text-transform: uppercase;
}

.blog-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-editor-toolbar button {
	padding: 8px 11px;
	color: white;
	background-color: #31373f;
	border: 1px solid #4f5966;
	border-radius: 6px;
	font-size: 0.86rem;
	font-weight: 800;
}

.blog-editor-toolbar button:hover {
	background-color: #494646;
}

.blog-editor input,
.blog-search-form input,
.blog-search-form select,
.blog-editor textarea {
	width: 100%;
	padding: 12px 14px;
	color: white;
	background-color: #101112;
	border: 1px solid #3f4651;
	border-radius: 6px;
	font-size: 1rem;
}

.blog-editor textarea {
	min-height: 180px;
	resize: vertical;
}

.blog-format-help {
	margin: 0;
	color: #8fa0a0;
	font-size: 0.86rem;
	text-align: left;
}

.blog-spellcheck-status {
	margin: -4px 0 0;
	color: #dbc39f;
	font-size: 0.86rem;
	text-align: left;
}

.blog-editor-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.blog-editor-actions a {
	color: #d3dddd;
	font-size: 0.92rem;
	font-weight: 800;
	text-decoration: none;
}

.blog-editor-actions a:hover {
	color: #ffb320;
}

.blog-media-picker {
	display: grid;
	gap: 10px;
	padding: 12px;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.blog-media-picker-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.blog-media-picker-heading span {
	color: #dbc39f;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.blog-media-picker-heading a {
	color: #ffb320;
	font-size: 0.86rem;
	font-weight: 800;
	text-decoration: none;
}

.blog-media-picker p {
	margin: 0;
	color: #8fa0a0;
	font-size: 0.9rem;
	text-align: left;
}

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

.blog-media-item {
	display: grid;
	gap: 3px;
	justify-items: start;
	min-width: 0;
	padding: 10px 12px;
	color: #d3dddd;
	background-color: #171b20;
	border: 1px solid #3f4651;
	border-radius: 6px;
	text-align: left;
}

.blog-media-item span {
	width: 100%;
	overflow: hidden;
	font-size: 0.92rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.blog-media-item small {
	color: #8fa0a0;
	font-size: 0.78rem;
}

.blog-editor input:focus,
.blog-editor textarea:focus {
	border-color: #ffb320;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 179, 32, 0.12);
}

.blog-editor button,
.blog-login-note a {
	justify-self: start;
	padding: 12px 18px;
	color: #111;
	background-color: #ffb320;
	border: none;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}

.blog-editor button:hover,
.blog-login-note a:hover {
	background-color: #ffd06c;
	transform: translateY(-1px);
}

.blog-post {
	position: relative;
	overflow: hidden;
}

.blog-post::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: #ffb320;
}

.blog-post-topline {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	color: #dcb677;
}

.blog-post h3 {
	margin: 0 0 8px;
	color: #f8efe2;
	font-size: 1.35rem;
	line-height: 1.2;
	text-align: left;
	overflow-wrap: anywhere;
}

.blog-post-body p,
.home-blog-list .blog-post-body p {
	margin: 12px 0 0;
	color: #d3dddd;
	font-size: 1rem;
	line-height: 1.72;
	text-align: left;
	overflow-wrap: anywhere;
}

.blog-image {
	margin: 16px 0 0;
}

.blog-image img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: contain;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.blog-video-panel {
	margin: 16px 0 0;
	overflow: hidden;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.blog-video-panel video,
.blog-video-panel iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #05070a;
	border: 0;
}

.blog-video-panel video {
	height: auto;
	max-height: 620px;
}

.blog-video-compact {
	width: min(100%, 360px);
	margin: 12px auto 0;
}

.blog-video-compact video,
.blog-video-compact iframe {
	height: clamp(180px, 34vw, 240px);
	aspect-ratio: auto;
	object-fit: contain;
}

.blog-code-panel {
	margin: 16px 0 0;
	overflow: hidden;
	background-color: #0f1012;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.blog-code-panel figcaption {
	padding: 8px 12px;
	color: #ffb320;
	background-color: #1b1b1b;
	border-bottom: 1px solid #31373f;
	font-family: 'Courier New', Courier, monospace;
	font-size: small;
	font-weight: bold;
	text-transform: uppercase;
}

.blog-code-panel pre {
	margin: 0;
	padding: 14px;
	overflow-x: auto;
	color: #e8eeee;
	text-align: left;
}

.blog-code-panel code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.92rem;
	line-height: 1.55;
	white-space: pre;
}

.blog-meta {
	color: #8fa0a0;
	font-size: small;
}

.blog-meta span {
	color: #ffb320;
	font-weight: 800;
}

.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.blog-tags span {
	padding: 4px 8px;
	color: #d3dddd;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 800;
}

.blog-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.blog-share-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}

.blog-actions .blog-share-link {
	width: 42px;
	min-width: 42px;
	min-height: 42px;
	padding: 0;
	color: white !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.95rem;
	font-weight: 900;
	line-height: 1;
	text-transform: none;
}

.blog-share-link span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.blog-share-facebook {
	background-color: #1877f2 !important;
}

.blog-share-twitter {
	background-color: #111111 !important;
}

.blog-share-linkedin {
	background-color: #0a66c2 !important;
}

.blog-share-reddit {
	background-color: #ff4500 !important;
}

.blog-share-email {
	background-color: #4f5966 !important;
}

.blog-actions .blog-share-link:hover {
	color: white !important;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.blog-comments {
	max-width: 880px;
	margin: -8px auto 28px;
	padding: 20px 22px;
	background-color: rgba(15, 20, 28, 0.94);
	border: 1px solid var(--gw-line, #3f4651);
	border-top: 0;
	border-radius: 0 0 var(--gw-radius, 8px) var(--gw-radius, 8px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.blog-comments-heading,
.blog-comment-meta,
.blog-comment-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.blog-comments-heading span {
	color: var(--gw-gold, #ffb320);
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blog-comments-heading h4 {
	margin: 3px 0 0;
	color: var(--gw-text, #f8efe2);
	font-size: 1.1rem;
}

.blog-comments-heading button {
	padding: 8px 11px;
	color: #061018 !important;
	background: #f2bd57 !important;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
}

.blog-comments-heading button:hover,
.blog-comments-heading button:focus {
	color: #061018 !important;
	background: #ffd777 !important;
	outline: 2px solid rgba(73, 215, 255, 0.38);
	outline-offset: 2px;
}

.blog-comments:not(.is-open) {
	margin-bottom: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.blog-comments-heading a,
.blog-comment-login a {
	color: var(--gw-accent, #49d7ff);
	font-weight: 800;
	text-decoration: none;
}

.blog-comments-empty,
.blog-comment-login {
	margin: 18px 0;
	color: var(--gw-muted, #aebbbb);
	text-align: left;
}

.blog-comment-list {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.blog-comment {
	position: relative;
	padding: 14px 16px;
	background-color: rgba(7, 10, 14, 0.76);
	border: 1px solid var(--gw-line, #31373f);
	border-radius: var(--gw-radius, 8px);
}

.blog-comment-meta strong {
	color: var(--gw-text, #f8efe2);
}

.blog-comment-meta time {
	color: var(--gw-muted, #8fa0a0);
	font-size: 0.78rem;
}

.blog-comment p {
	margin: 9px 0 0;
	color: var(--gw-muted, #d3dddd);
	line-height: 1.6;
	overflow-wrap: anywhere;
	text-align: left;
}

.blog-comment-replying {
	margin-top: 8px;
	color: var(--gw-gold, #f2bd57);
	font-size: 0.76rem;
	font-weight: 800;
}

.blog-comment-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
}

.blog-comment-reply {
	padding: 6px 10px;
	color: #061018 !important;
	background: var(--gw-gold, #f2bd57) !important;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 800;
}

.blog-comment-reply:hover,
.blog-comment-reply:focus {
	background: #ffd777 !important;
}

.blog-comment-delete {
	margin: 0;
	text-align: right;
}

.blog-comment-delete button {
	padding: 6px 10px;
	color: #fff !important;
	background: #a82e3b !important;
	border: 1px solid #d85a68;
	border-radius: 6px;
	font-size: 0.78rem;
}

.blog-comment-delete button:hover {
	color: #fff !important;
	background: #c93648 !important;
}

.blog-comment-form {
	display: grid;
	gap: 9px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--gw-line, #31373f);
}

.blog-comment-form label {
	color: var(--gw-gold, #dbc39f);
	font-size: 0.84rem;
	font-weight: 900;
	text-transform: uppercase;
}

.blog-comment-reply-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 11px;
	color: var(--gw-text, #f8efe2);
	background: rgba(242, 189, 87, 0.1);
	border: 1px solid rgba(242, 189, 87, 0.38);
	border-radius: 6px;
	font-size: 0.82rem;
}

.blog-comment-reply-status[hidden] {
	display: none;
}

.blog-comment-reply-status button {
	padding: 4px 8px;
	color: var(--gw-text, #f8efe2) !important;
	background: transparent !important;
	border: 1px solid var(--gw-line, #31373f);
	border-radius: 5px;
	font-size: 0.72rem;
}

.blog-comment-form textarea {
	width: 100%;
	min-height: 100px;
	padding: 12px 14px;
	resize: vertical;
}

.blog-comment-form-actions small {
	color: var(--gw-muted, #8fa0a0);
}

.blog-comment-form-actions button {
	padding: 10px 14px;
}

.blog-login-note,
.blog-empty-state {
	max-width: 920px;
	margin: 0 auto 20px;
	padding: 22px;
	background-color: rgba(16, 17, 18, 0.9);
	border: 1px solid #3f4651;
	border-radius: 8px;
	text-align: center;
}

.blog-login-note h3,
.blog-empty-state h3 {
	margin: 0 0 8px;
	color: #f8efe2;
}

.blog-login-note p,
.blog-empty-state p,
.blog-more-link {
	color: #c7d3d3;
	text-align: center;
}

.home-blog-list {
	padding: 0 10px 20px;
}

.home-blog-list .blog-post {
	padding: 10px;
}

.home-blog-list .blog-post h3 {
	font-size: large;
}

.home-blog-list .blog-post-topline {
	display: none;
}

@media (max-width: 620px) {
	.blog-primary-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.blog-comments-heading,
	.blog-comment-meta,
	.blog-comment-form-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.blog-comment-form-actions button {
		width: 100%;
	}
}

/* Home */

.home-page {
	width: min(1280px, 100%);
	margin: 0 auto;
}

.home-intro {
	display: grid;
	grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
	padding: 22px;
	text-align: left;
	background:
		linear-gradient(145deg, rgba(255, 179, 32, 0.08), rgba(83, 134, 230, 0.08) 50%, rgba(18, 17, 17, 0)),
		#151515;
	border-radius: 12px;
}

.home-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 14px;
	align-items: start;
}

.home-panel {
	min-width: 0;
	padding: 18px;
	text-align: left;
	background-color: rgba(15, 20, 28, 0.94);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.26);
}

.home-panel h2 {
	margin: 0 0 12px;
}

.home-panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.home-panel-heading h2 {
	margin: 0;
}

.home-panel-heading > a,
.home-video-empty a {
	flex: 0 0 auto;
	padding: 8px 11px;
	color: #061018 !important;
	background: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.home-panel-heading > a:hover,
.home-panel-heading > a:focus,
.home-video-empty a:hover,
.home-video-empty a:focus {
	color: #061018 !important;
	background: #ffd777;
}

.home-kicker {
	color: #ffb320;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
}

.home-intro h2 {
	margin: 8px 0;
	color: #f8efe2;
	line-height: 1.12;
}

.home-intro p {
	margin: 0;
	color: rgb(140, 174, 174);
	text-align: left;
}

.home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.home-actions a {
	display: inline-block;
	padding: 10px 14px;
	color: white;
	background-color: coral;
	border-radius: 6px;
	font-weight: 800;
	text-decoration: none;
}

.home-actions a:hover {
	color: white;
	background-color: #0056b3;
}

.home-feature-video {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #0f1012;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.home-feature-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

.home-video-card {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.home-video-card:first-child {
	grid-column: 1 / -1;
}

.home-video-card h3 {
	margin: 8px 0 0;
	color: #e7edf5;
	font-size: 0.98rem;
	line-height: 1.25;
	text-align: left;
}

.home-video-card h3 a {
	color: #e7edf5;
	text-decoration: none;
}

.home-video-card h3 a:hover,
.home-video-card h3 a:focus {
	color: #f2bd57;
}

.home-video-card p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5px 10px;
	margin: 6px 0 0;
	color: #9fb0c2;
	font-size: 0.78rem;
	text-align: left;
}

.home-video-card p a {
	font-weight: 800;
	text-decoration: none;
}

.home-video-frame {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #0f1012;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.home-video-frame iframe,
.home-video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

.home-video-empty {
	display: grid;
	justify-items: start;
	gap: 12px;
	padding: 18px;
	background: rgba(7, 10, 14, 0.62);
	border: 1px dashed #3f4651;
	border-radius: 8px;
}

.home-video-empty p {
	margin: 0;
	text-align: left;
}

/* Videos page */

.videos-page {
	padding-bottom: 70px;
}

.videos-container {
	width: min(1180px, 100%);
	margin: 0 auto;
	text-align: left;
}

.videos-hero,
.videos-empty,
.videos-card {
	background-color: rgba(21, 29, 41, 0.86);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.videos-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding: 20px;
}

.videos-breadcrumb {
	margin: 0 0 10px;
}

.videos-notice {
	margin: 0 0 12px;
}

.videos-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: #f2bd57 !important;
	font-size: 0.86rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.videos-breadcrumb a::before {
	content: "<";
	margin-right: 8px;
	color: #49d7ff;
}

.videos-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.channel-subscribe-form {
	margin: 0;
}

.video-card-subscribe {
	justify-self: start;
}

.video-card-subscribe button {
	min-height: 36px;
	padding: 7px 11px;
	font-size: 0.76rem;
}

.video-card-login {
	justify-self: start;
	color: #49d7ff !important;
	font-size: 0.78rem;
	font-weight: 900;
	text-decoration: none;
}

.video-card-login:hover,
.video-card-login:focus {
	color: #f2bd57 !important;
}

.videos-kicker {
	color: #f2bd57;
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
}

.videos-hero h2,
.videos-empty h3,
.videos-card h3 {
	margin: 6px 0 8px;
	color: #e7edf5;
	text-align: left;
	overflow-wrap: anywhere;
}

.videos-hero p,
.videos-empty p,
.videos-card p {
	margin: 0;
	color: #9fb0c2;
	text-align: left;
}

.videos-channel-link {
	color: #f2bd57 !important;
	font-weight: 900;
	text-decoration: none;
}

.videos-channel-link:hover,
.videos-channel-link:focus {
	color: #49d7ff !important;
}

.videos-hero a,
.videos-actions a,
.channel-subscribe-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	color: #061018 !important;
	background-color: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 8px;
	font-size: 0.86rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

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

.video-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.video-category-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 11px;
	color: #d9e3ec !important;
	background: #0a1017;
	border: 1px solid #3b4857;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 900;
	text-decoration: none;
}

.video-category-filter a:hover,
.video-category-filter a:focus,
.video-category-filter a.is-active {
	color: #061018 !important;
	background: #49d7ff;
	border-color: #a8edff;
	outline: none;
}

.live-feeds-section {
	margin-bottom: 18px;
	padding: 18px;
	background: rgba(21, 29, 41, 0.9);
	border: 1px solid rgba(239, 90, 103, 0.45);
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(239, 90, 103, 0.1);
}

.live-feeds-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.live-feeds-heading h2 {
	margin: 4px 0 0;
	color: #e7edf5;
}

.live-feeds-count,
.live-feed-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #ef5a67;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.live-feeds-count {
	min-height: 30px;
	padding: 6px 11px;
}

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

.live-feed-card {
	overflow: hidden;
	background: #0b1017;
	border: 1px solid #313d4a;
	border-radius: 8px;
}

.live-feed-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #05070a;
}

.live-feed-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.live-feed-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 9px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.live-feed-details {
	display: grid;
	gap: 8px;
	padding: 13px;
}

.live-feed-details h3,
.live-feed-details p {
	margin: 0;
	text-align: left;
	overflow-wrap: anywhere;
}

.live-feed-details h3 {
	color: #e7edf5;
}

.live-feed-details p {
	color: #9fb0c2;
}

.live-feed-details > a {
	justify-self: start;
	color: #49d7ff !important;
	font-size: 0.82rem;
	font-weight: 900;
}

.videos-empty {
	padding: 22px;
	text-align: center;
}

.videos-card {
	overflow: hidden;
}

.video-card-preview {
	position: relative;
	display: block;
	overflow: hidden;
	background: #05070a;
	text-decoration: none;
}

.video-card-preview video {
	display: block;
	width: 100%;
	height: clamp(220px, 28vw, 320px);
	background-color: #05070a;
	border: 0;
	object-fit: contain;
}

.video-preview-action {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(5, 7, 10, 0.62);
	font-size: 0.84rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 160ms ease;
}

.video-preview-action::before {
	content: "\25B6";
	margin-right: 8px;
	color: #49d7ff;
	font-size: 1.15rem;
}

.video-card-preview:hover .video-preview-action,
.video-card-preview:focus .video-preview-action,
.home-video-frame:hover .video-preview-action,
.home-video-frame:focus .video-preview-action {
	opacity: 1;
}

.videos-card-body {
	display: grid;
	gap: 10px;
	padding: 14px;
}

.videos-actions {
	display: grid;
	gap: 8px;
}

.videos-actions input {
	width: 100%;
	padding: 10px 12px;
	color: #d3dddd;
	background-color: #070a0e;
	border: 1px solid #31373f;
	border-radius: 6px;
	font-size: 0.86rem;
}

.video-reactions,
.video-reactions form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.video-reactions form {
	margin: 0;
}

.video-reactions button,
.video-reactions a,
.video-reactions > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 7px 11px;
	color: #d9e3ec !important;
	background: #0a1017;
	border: 1px solid #3b4857;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
}

.video-reactions button {
	cursor: pointer;
}

.video-reactions button span {
	margin-left: 6px;
	color: #9fb0c2;
}

.video-reaction-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.video-reactions > span .video-reaction-icon {
	margin-right: 6px;
}

.video-reactions button:hover,
.video-reactions button:focus,
.video-reactions button.is-active {
	color: #061018 !important;
	background: #49d7ff;
	border-color: #a8edff;
	outline: none;
}

.video-reactions button.is-active span {
	color: #061018;
}

.video-reactions button.is-active.is-dislike {
	background: #f2bd57;
	border-color: #ffe2a1;
}

.video-reactions > span {
	color: #9fb0c2 !important;
	cursor: default;
}

.watch-reactions {
	margin-top: 4px;
}

.content-report-form {
	display: grid;
	gap: 7px;
	margin: 0;
}

.content-report-form label {
	margin: 0;
	color: #f2bd57;
	font-size: 0.72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.content-report-form textarea {
	width: 100%;
	min-height: 58px;
	padding: 8px 10px;
	color: #d9e3ec;
	background: #070a0e;
	border: 1px solid #3b4857;
	border-radius: 6px;
	font: inherit;
	font-size: 0.82rem;
	resize: vertical;
}

.content-report-form textarea:focus {
	border-color: #ef5a67;
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 90, 103, 0.12);
}

.content-report-form button {
	justify-self: start;
	padding: 6px 10px;
	color: #d9e3ec !important;
	background: transparent;
	border: 1px solid #5d6875;
	border-radius: 6px;
	font-size: 0.74rem;
	font-weight: 800;
	cursor: pointer;
}

.content-report-form .content-report-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	font-size: 1.3rem;
	line-height: 1;
}

.content-report-icon-button span {
	display: block;
	transform: translateY(-1px);
}

.content-report-form button:hover,
.content-report-form button:focus {
	color: #ffd8dc !important;
	background: rgba(239, 90, 103, 0.12);
	border-color: #ef5a67;
	outline: none;
}

.admin-report-reason {
	margin-top: 5px;
	padding: 7px 8px;
	color: #ffd8dc !important;
	background: rgba(239, 90, 103, 0.1);
	border-left: 3px solid #ef5a67;
}

.watch-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
	gap: 16px;
	padding: 16px;
	background-color: rgba(21, 29, 41, 0.86);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.watch-panel video {
	display: block;
	width: 100%;
	max-height: 72vh;
	background-color: #05070a;
	border: 1px solid #31373f;
	border-radius: 8px;
	object-fit: contain;
}

.watch-details {
	display: grid;
	align-content: start;
	gap: 10px;
}

.watch-details h2 {
	margin: 0;
	color: #e7edf5;
	text-align: left;
	overflow-wrap: anywhere;
}

.watch-details p {
	margin: 0;
	color: #9fb0c2;
	text-align: left;
}

.watch-actions {
	margin-top: 8px;
}

/* Help page */

.help-page {
	padding-bottom: 70px;
}

.help-container {
	width: min(100%, 1120px);
	height: auto;
	min-height: calc(85vh + 50px);
	padding: 28px;
	overflow: auto;
	text-align: left;
	background:
		linear-gradient(135deg, rgba(255, 179, 32, 0.06), rgba(83, 134, 230, 0.05) 45%, rgba(27, 27, 27, 0)),
		#151515;
}

.help-hero,
.help-panel {
	background-color: rgba(34, 34, 34, 0.96);
	border: 1px solid #3f4651;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.help-hero {
	max-width: 920px;
	margin: 0 auto 18px;
	padding: 24px;
}

.help-hero span,
.help-panel span {
	color: #ffb320;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.help-hero h2,
.help-panel h3 {
	margin: 6px 0 8px;
	color: #f8efe2;
	text-align: left;
	overflow-wrap: anywhere;
}

.help-hero p,
.help-panel p {
	margin: 0;
	color: #c7d3d3;
	text-align: left;
}

.help-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	max-width: 920px;
	margin: 0 auto;
}

.help-panel {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 20px;
}

.help-panel a {
	justify-self: start;
	padding: 10px 14px;
	color: #111;
	background-color: #ffb320;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.help-panel a:hover {
	background-color: #ffd06c;
	transform: translateY(-1px);
}

/* Profile */

.profile-page {
	padding-bottom: 70px;
}

.profile-container {
	width: min(100%, 980px);
	height: auto;
	min-height: calc(85vh + 50px);
	padding: 24px;
	overflow: auto;
	text-align: left;
	background:
		linear-gradient(135deg, rgba(255, 179, 32, 0.06), rgba(83, 134, 230, 0.05) 45%, rgba(27, 27, 27, 0)),
		#151515;
}

.profile-header,
.profile-panel {
	max-width: 820px;
	margin: 0 auto 18px;
	padding: 20px;
	background-color: rgba(34, 34, 34, 0.96);
	border: 1px solid #3f4651;
	border-radius: 8px;
}

.profile-tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	max-width: 820px;
	margin: 0 auto 18px;
	padding: 6px;
	background-color: rgba(7, 10, 14, 0.78);
	border: 1px solid #3f4651;
	border-radius: 10px;
}

.profile-tabs button {
	min-height: 42px;
	padding: 9px 10px;
	color: #c7d3d3 !important;
	background: transparent !important;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 0.82rem;
	font-weight: 900;
	text-transform: uppercase;
	cursor: pointer;
}

.profile-tabs button:hover,
.profile-tabs button:focus {
	color: #f8efe2 !important;
	background: rgba(73, 215, 255, 0.1) !important;
	border-color: #3f4651;
	outline: none;
	transform: none;
}

.profile-tabs button.is-active {
	color: #061018 !important;
	background: linear-gradient(135deg, #49d7ff, #f2bd57) !important;
	border-color: #ffe2a1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.profile-tabs-ready [data-profile-tab-panel][hidden] {
	display: none !important;
}

.profile-tabs-ready [data-profile-tab-panel] {
	scroll-margin-top: 18px;
}

.profile-header span,
.profile-section-heading span {
	color: #ffb320;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.profile-header h2,
.profile-section-heading h3 {
	margin: 6px 0 8px;
	color: #f8efe2;
	text-align: left;
	overflow-wrap: anywhere;
}

.profile-section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 12px;
}

.profile-section-heading span,
.profile-section-heading h3 {
	grid-column: 1;
}

.profile-panel-toggle {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	min-width: 92px;
	padding: 9px 12px;
	color: #061018;
	background-color: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
	cursor: pointer;
}

.profile-panel.is-collapsed > :not(.profile-section-heading) {
	display: none !important;
}

.profile-panel.is-collapsed {
	padding-bottom: 14px;
}

.profile-header p,
.profile-empty {
	margin: 0;
	color: #c7d3d3;
	text-align: left;
}

.profile-notice {
	max-width: 820px;
	margin: 0 auto 16px;
	text-align: center;
}

.profile-user-panel {
	display: grid;
	gap: 16px;
}

.profile-overview-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.profile-overview-item {
	display: grid;
	align-content: start;
	gap: 6px;
	min-height: 118px;
	padding: 14px;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.profile-overview-item span,
.profile-overview-item small {
	color: #9fb0c2;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.profile-overview-item strong {
	color: #f8efe2;
	font-size: 1.4rem;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.profile-rank-overview {
	grid-column: span 2;
}

.profile-mini-meter {
	height: 8px;
	overflow: hidden;
	background-color: #070a0e;
	border: 1px solid #31373f;
	border-radius: 999px;
}

.profile-mini-meter span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #ffb320, #49d7ff);
	border-radius: inherit;
}

.profile-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.profile-quick-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	color: #111;
	background-color: #ffb320;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.profile-quick-actions a:hover {
	background-color: #ffd06c;
	transform: translateY(-1px);
}

@media (max-width: 720px) {
	.profile-tabs {
		display: flex;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.profile-tabs button {
		flex: 0 0 auto;
		min-width: 104px;
	}
}

.profile-form {
	display: grid;
	gap: 10px;
}

.profile-form label {
	margin: 0;
	color: #dbc39f;
	font-size: 0.86rem;
	text-transform: uppercase;
}

.profile-form input {
	width: 100%;
	padding: 12px 14px;
	color: white;
	background-color: #101112;
	border: 1px solid #3f4651;
	border-radius: 6px;
	font-size: 1rem;
}

.profile-form input:focus {
	border-color: #ffb320;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 179, 32, 0.12);
}

.profile-form .profile-inline-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	color: #f2e7d3;
	text-transform: none;
}

.profile-form .profile-inline-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: #ffb320;
}

.profile-form button {
	justify-self: start;
	padding: 12px 18px;
	color: #111;
	background-color: #ffb320;
	border: none;
	border-radius: 6px;
	font-weight: 800;
}

.profile-action-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 12px 18px;
	color: #111;
	background-color: #ffb320;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.profile-action-link:hover {
	background-color: #ffd06c;
	transform: translateY(-1px);
}

.profile-download-list {
	max-height: 260px;
	margin: 0;
	overflow-y: auto;
	padding-right: 2px;
	scrollbar-width: none;
}

.profile-download-list::-webkit-scrollbar {
	display: none;
}

.profile-download-list .file-name {
	display: grid;
	gap: 2px;
}

.profile-download-list .file-name small {
	color: #9fb0c2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.78rem;
	font-weight: normal;
}

.profile-channel-list {
	display: grid;
	gap: 10px;
}

.profile-channel-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.profile-channel-item h4 {
	margin: 0 0 4px;
	color: #f8efe2;
	font-size: 1rem;
	text-align: left;
	overflow-wrap: anywhere;
}

.profile-channel-item p {
	margin: 0;
	color: #9fb0c2;
	text-align: left;
}

.profile-channel-item a {
	flex: 0 0 auto;
	color: #061018 !important;
	background-color: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	padding: 9px 12px;
	font-size: 0.82rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.profile-video-form {
	margin-bottom: 20px;
}

.profile-live-feed {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(116, 139, 167, 0.26);
}

.profile-live-feed-form {
	display: grid;
	gap: 9px;
	padding: 15px;
	background: rgba(7, 10, 14, 0.48);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.profile-live-feed-form input[type="url"] {
	width: 100%;
	padding: 12px 14px;
	color: #e7edf5;
	background: rgba(7, 10, 14, 0.88);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
	font-size: 1rem;
}

.profile-live-feed-form input[type="url"]:focus {
	border-color: #49d7ff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(73, 215, 255, 0.15);
}

.profile-live-feed-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	padding: 11px 12px;
	color: #9fb0c2;
	background: rgba(7, 10, 14, 0.55);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.profile-live-feed-status strong {
	color: #f2bd57;
}

.profile-live-feed-status span {
	flex: 1 1 280px;
	overflow-wrap: anywhere;
}

.profile-live-feed-status form {
	margin: 0;
}

.profile-live-feed-status button {
	padding: 8px 11px;
	color: #fff !important;
	background: #a82e3b !important;
	border: 1px solid #d85a68;
	border-radius: 6px;
	font-weight: 900;
	cursor: pointer;
}

.profile-video-drop {
	display: grid;
	place-items: center;
	min-height: 118px;
	padding: 18px;
	color: #f8efe2;
	background-color: #101112;
	border: 2px dashed #3f4651;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.profile-video-drop strong {
	display: block;
	font-size: 1.05rem;
}

.profile-video-drop span {
	display: block;
	margin-top: 4px;
	color: #9fb0c2;
	font-size: 0.9rem;
}

.profile-video-drop:hover,
.profile-video-drop:focus,
.profile-video-drop.is-dragover {
	background-color: #15191e;
	border-color: #ffb320;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 179, 32, 0.12);
}

.profile-video-file {
	margin-top: -2px;
	overflow-wrap: anywhere;
}

.profile-form button:disabled,
.profile-video-form input:disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.profile-subsection-heading {
	margin-top: 18px;
}

.profile-video-list {
	display: grid;
	gap: 14px;
}

.profile-video-card {
	display: grid;
	grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
	gap: 14px;
	padding: 14px;
	background-color: #101112;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.profile-video-card video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #05070a;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.profile-video-card h4 {
	margin: 0 0 6px;
	color: #f8efe2;
	font-size: 1.05rem;
	text-align: left;
	overflow-wrap: anywhere;
}

.profile-video-card p {
	margin: 0 0 10px;
	color: #8fa0a0;
	text-align: left;
}

.profile-video-card label {
	display: block;
	margin: 10px 0 5px;
	color: #dbc39f;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.profile-video-card input,
.profile-video-card textarea {
	width: 100%;
	padding: 10px 12px;
	color: #d3dddd;
	background-color: #070a0e;
	border: 1px solid #31373f;
	border-radius: 6px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.86rem;
	resize: vertical;
}

.profile-video-form select {
	width: 100%;
	padding: 10px 12px;
	color: #d3dddd;
	background-color: #070a0e;
	border: 1px solid #31373f;
	border-radius: 6px;
}

.profile-video-blog-form {
	margin-top: 10px;
}

.profile-video-blog-form button {
	padding: 10px 14px;
	color: #111;
	background-color: #ffb320;
	border: 0;
	border-radius: 6px;
	font-weight: 800;
	cursor: pointer;
}

.profile-video-blog-form button:hover {
	background-color: #ffd06c;
}

.profile-post-list .blog-post {
	margin-right: 0;
	margin-left: 0;
}

@media screen and (max-width: 700px) {
	.blog-container {
		padding: 16px;
	}

	.blog-search-form,
	.blog-editor-grid,
	.blog-media-list,
	.blog-toc ol {
		grid-template-columns: 1fr;
	}

	.blog-search-form button,
	.blog-search-form a {
		width: 100%;
	}

	.blog-hero {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.blog-hero h2 {
		font-size: 2rem;
	}

	.blog-stat {
		min-height: auto;
	}

	.blog-post-topline {
		display: grid;
	}

	.blog-editor,
	.blog-post,
	.blog-login-note,
	.blog-empty-state {
		padding: 18px;
	}

	.profile-video-card {
		grid-template-columns: 1fr;
	}

	.profile-channel-item {
		display: grid;
	}

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

	.profile-rank-overview {
		grid-column: span 2;
	}

	.profile-quick-actions a {
		flex: 1 1 140px;
	}
}

/* Admin */

.admin-page {
	padding-bottom: 70px;
}

.admin-page .admin-titlebar {
	width: 100%;
	min-height: 80px;
	height: auto;
}

.admin-page .admin-titlebar h2 {
	margin: 0 0 6px;
	color: burlywood;
}

.admin-page .admin-titlebar p {
	margin: 0;
	color: rgb(140, 174, 174);
	text-align: center;
}

.admin-page .admin-layout {
	align-items: stretch;
	gap: 10px;
	width: 100%;
	overflow-x: hidden;
}

.admin-page .admin-content {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.admin-tabs {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 15px;
	padding: 6px;
	background-color: rgba(7, 10, 14, 0.78);
	border: 1px solid #3f4651;
	border-radius: 10px;
}

.admin-tabs button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 9px 10px;
	color: #c7d3d3 !important;
	background: transparent !important;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 0.82rem;
	font-weight: 900;
	text-transform: uppercase;
	cursor: pointer;
}

.admin-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23px;
	height: 23px;
	padding: 0 7px;
	color: #061018;
	background: #9fb0c2;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.admin-tabs button.has-items .admin-tab-count {
	background: #ef5a67;
	color: #fff;
	box-shadow: 0 0 10px rgba(239, 90, 103, 0.35);
}

.admin-tabs button:hover,
.admin-tabs button:focus {
	color: #f8efe2 !important;
	background: rgba(73, 215, 255, 0.1) !important;
	border-color: #3f4651;
	outline: none;
	transform: none;
}

.admin-tabs button.is-active {
	color: #061018 !important;
	background: linear-gradient(135deg, #49d7ff, #f2bd57) !important;
	border-color: #ffe2a1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.admin-tabs button.is-active .admin-tab-count {
	color: #f8efe2;
	background: #182330;
}

.admin-tabs-ready [data-admin-tab-panel][hidden] {
	display: none !important;
}

.admin-tabs-ready [data-admin-tab-panel] {
	scroll-margin-top: 18px;
}

.admin-layout .admin-sidebar {
	flex: 0 0 280px;
	width: 280px;
	min-width: 0;
	height: calc(78vh + 50px);
	padding: 15px;
	overflow: auto;
}

.admin-layout .admin-content {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: calc(78vh + 50px);
	padding: 15px;
	overflow: auto;
}

.admin-layout .admin-sidebar h3,
.admin-section-heading h3 {
	margin: 0 0 12px;
	color: burlywood;
	text-align: left;
}

.admin-tool-list {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.admin-tool-list li {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
}

.admin-tool-list a {
	display: block;
	padding: 10px;
	color: coral;
	text-decoration: none;
	border-radius: 4px;
	margin: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.admin-tool-list a:hover {
	background: #e9ecef;
}

.admin-tool-list a.active {
	background: #333333;
	color: #fff;
}

.admin-panel {
	background-color: #222;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.admin-overview-panel {
	display: grid;
	gap: 18px;
}

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

.admin-quick-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 14px;
	color: #061018 !important;
	background: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 8px;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
}

.admin-quick-actions a:hover,
.admin-quick-actions a:focus {
	color: #061018 !important;
	background: #ffd777;
	outline: 2px solid rgba(73, 215, 255, 0.4);
	outline-offset: 2px;
}

.admin-panel {
	margin: 0 0 15px;
	padding: 15px;
}

.admin-notice {
	margin: 0 0 15px;
	padding: 10px;
	border-radius: 6px;
	text-align: center;
}

.admin-section-heading {
	margin-bottom: 12px;
}

.admin-section-heading span {
	display: block;
	color: coral;
	font-size: small;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
}

.admin-table-wrap {
	overflow-x: auto;
}

.admin-table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0 8px;
	color: rgb(140, 174, 174);
}

.admin-table th,
.admin-table td {
	padding: 10px;
	text-align: left;
	vertical-align: middle;
}

.admin-table th {
	color: burlywood;
	background-color: transparent;
	font-size: small;
	text-transform: uppercase;
}

.admin-table td {
	background-color: #1b1b1b;
	border-top: 1px solid #31373f;
	border-bottom: 1px solid #31373f;
}

.admin-table td:first-child {
	border-left: 1px solid #31373f;
	border-radius: 8px 0 0 8px;
}

.admin-table td:last-child {
	border-right: 1px solid #31373f;
	border-radius: 0 8px 8px 0;
}

.admin-table td strong,
.admin-table td span {
	display: block;
	overflow-wrap: anywhere;
}

.admin-table td span {
	margin-top: 4px;
	color: #999;
	font-size: 0.86rem;
}

.admin-table form {
	margin: 0;
}

.admin-table button,
.admin-danger-button {
	padding: 8px 12px;
	color: white;
	background-color: coral;
	border: none;
	border-radius: 4px;
	font-weight: 800;
	cursor: pointer;
}

.admin-table button:hover,
.admin-tool-link:hover {
	background: #0056b3;
}

.admin-danger-button {
	color: white;
	background-color: #b73535;
}

.admin-permission-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.admin-permission-form label {
	margin: 0;
	color: rgb(140, 174, 174);
}

.admin-reply-form {
	display: grid;
	gap: 8px;
	min-width: 260px;
}

.admin-reply-form label {
	margin: 0;
	color: burlywood;
	font-size: small;
}

.admin-reply-form input,
.admin-reply-form textarea {
	width: 100%;
	padding: 8px;
	color: white;
	background-color: #242424;
	border: 1px solid #31373f;
	border-radius: 4px;
}

.admin-reply-form textarea {
	min-height: 96px;
	resize: vertical;
}

.admin-empty {
	color: #999;
	font-style: italic;
	text-align: center;
}

.admin-video-list {
	display: grid;
	gap: 12px;
}

.admin-live-feed-list {
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(116, 139, 167, 0.26);
}

.admin-live-feed-list h4 {
	margin: 0;
	color: #e7edf5;
}

.admin-live-feed-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px;
	background: rgba(7, 10, 14, 0.55);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.admin-live-feed-item > div {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.admin-live-feed-item strong,
.admin-live-feed-item span {
	overflow-wrap: anywhere;
}

.admin-live-feed-item span {
	color: #9fb0c2;
}

.admin-live-feed-item a {
	justify-self: start;
	color: #49d7ff !important;
	font-weight: 900;
}

.admin-live-feed-item form {
	margin: 0;
}

.admin-live-status {
	display: inline-flex;
	margin-right: 7px;
	padding: 3px 7px;
	background: #4e5966;
	border-radius: 999px;
	font-size: 0.68rem;
	text-transform: uppercase;
}

.admin-live-status.is-live {
	color: #fff;
	background: #ef5a67;
}

.admin-video-item {
	display: grid;
	grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1.3fr);
	gap: 16px;
	padding: 14px;
	background: rgba(7, 10, 14, 0.55);
	border: 1px solid rgba(116, 139, 167, 0.26);
	border-radius: 8px;
}

.admin-video-item video {
	display: block;
	width: 100%;
	max-height: 230px;
	background: #05070a;
	border-radius: 6px;
	object-fit: contain;
}

.admin-video-details {
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
}

.admin-video-details h4,
.admin-video-details p {
	margin: 0;
	text-align: left;
	overflow-wrap: anywhere;
}

.admin-video-details h4 {
	color: #e7edf5;
}

.admin-video-details p {
	color: #9fb0c2;
}

.admin-video-details a {
	color: #f2bd57 !important;
	font-weight: 900;
}

.admin-video-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.admin-video-actions form {
	margin: 0;
}

.admin-video-actions > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 12px;
	color: #061018 !important;
	background: #f2bd57;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.admin-tool-panel p {
	margin: 0 0 14px;
	color: rgb(140, 174, 174);
	text-align: left;
}

.admin-tool-link {
	display: inline-block;
	padding: 10px;
	color: white !important;
	background-color: coral;
	border-radius: 4px;
	font-weight: 800;
	text-decoration: none;
}

@media screen and (max-width: 800px) {
	.admin-layout .admin-sidebar,
	.admin-layout .admin-content {
		flex-basis: auto;
		width: 100%;
		height: auto;
		max-height: none;
	}

	.admin-tabs {
		display: flex;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.admin-tabs button {
		flex: 0 0 auto;
		min-width: 110px;
	}

	.admin-quick-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 520px) {
	.admin-quick-actions {
		grid-template-columns: 1fr;
	}

	.admin-video-item {
		grid-template-columns: 1fr;
	}

	.admin-live-feed-item {
		align-items: stretch;
		flex-direction: column;
	}
}

/* Main page containers */

/* Set some basic style for main page containers. div containers inside the flex container */

div.text-container {
	width: calc(100% - 100px);
	height: calc(4vh + 1px);
	border: 2px solid #31373f;
	border-radius: 15px;
	background-color: #333333;
	float: none;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.left-container {
	width: calc(100% - 100px);
	height: calc(85vh + 50px);
	border: 2px solid #31373f;
	border-radius: 15px;
	background-color: #1b1b1b;
	float: left;
	padding: 15px;
	margin: auto;
}

div.center-container {
	width: calc(100% - 100px);
	height: calc(85vh + 50px);
	border: 2px solid #31373f;
	border-radius: 15px;
	background-color: #1b1b1b;
	float: none;
	padding: 15px;
	margin: auto;
}

div.right-container {
	width: calc(100% - 100px);
	height: calc(85vh + 50px);
	border: 2px solid #31373f;
	border-radius: 15px;
	background-color: #1b1b1b;
	float: right;
	padding: 15px;
	margin: auto;
}

div.form-container {
	width: 100%;
	height: 100%;
	padding: 35px;
	border: 2px solid #31373f;
	border-radius: 15px;
	background-color: #1b1b1b;
	float: none;
}

/* End of main page containers */

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgb(18, 17, 17);
	padding: 8px;
	text-align: center;
	z-index: 1000;
}

footer nav a {
	text-align: center;
}

footer p {
	font-size: x-small;
	text-align: center;
}

/* uploads */

.file-manager-page {
	padding-bottom: 70px;
}

.file-manager-page .text-container {
	width: 100%;
	min-height: 80px;
	height: auto;
}

.file-manager-layout {
	align-items: stretch;
	gap: 10px;
	width: 100%;
	overflow-x: hidden;
}

.file-manager-sidebar {
	flex: 0 0 280px;
	width: 280px;
	min-width: 0;
	height: calc(78vh + 50px);
	padding: 15px;
	overflow: auto;
}

.file-manager-content {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: calc(78vh + 50px);
	padding: 15px;
	overflow: auto;
}

.wrapper {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	padding: 25px;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.layout {
	display: flex;
	gap: 30px;
	margin-top: 20px;
}

.sidebar {
	width: 30%;
	border-right: 1px solid #dee2e6;
	padding-right: 20px;
}

.main-content {
	width: 70%;
}

.folder-list {
	display: block;
	list-style: none;
	padding: 0px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.folder-item a {
	display: block;
	padding: 10px;
	color: coral;
	text-decoration: none;
	border-radius: 4px;
	margin: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.folder-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	margin: 5px 0;
}

.folder-item form {
	margin: 0;
}

.folder-item a:hover {
	background: #e9ecef;
}

.folder-item.active a {
	background: #333333;
	color: #fff;
	font-weight: bold;
}

.form-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 10px;
	max-width: 100%;
}

.form-inline input[type="text"],
.form-inline input[type="file"] {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

button {
	background: coral;
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 4px;
	cursor: pointer;
}

button:hover {
	background: #0056b3;
}

.file-list {
	display: block;
	list-style: none;
	padding: 0px;
	background: transparent;
	border: 0;
	border-radius: 0;
	max-width: 100%;
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 100%;
	padding: 8px;
	margin: 8px 0;
	background-color: #222;
	border: 1px solid #31373f;
	border-radius: 8px;
}

.file-name {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	color: rgb(140, 174, 174);
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-item a {
	display: inline-block;
	flex: 0 0 auto;
	padding: 10px;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.file-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.file-actions form {
	margin: 0;
}

.btn-download {
	background: coral;
	color: white !important;
	border: none;
	padding: 8px 15px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	min-width: 96px;
}

.btn-download:link,
.btn-download:visited,
.btn-download:hover,
.btn-download:active,
.btn-download:focus {
	color: white !important;
}

@media screen and (max-width:600px) {
	.file-manager-sidebar,
	.file-manager-content {
		flex-basis: auto;
		width: 100%;
		height: auto;
		max-height: none;
	}

	.file-item {
		align-items: stretch;
		flex-direction: column;
	}

	.file-name {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.file-actions {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.file-actions form {
		width: 100%;
	}

	.btn-danger-small,
	.btn-download {
		width: 100%;
	}

	.blog-newsletter,
	.blog-newsletter-row {
		grid-template-columns: 1fr;
	}

	.blog-newsletter button {
		width: 100%;
	}
}

.btn-download:hover {
	background: #0056b3;
}

.btn-danger-small {
	background: #b73535;
	color: white;
	border: none;
	padding: 8px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	white-space: nowrap;
}

.btn-danger-small:hover {
	background: #8f2424;
}

/* Error Styles */

.card {
	background: #1e293b;
	padding: 40px;
	border-radius: 12px;
	width: 420px;
	text-align: center;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.error {
	color: #721c24;
	background: #f8d7da;
	padding: 10px;
	border-radius: 4px;
}

.success {
	color: #155724;
	background: #d4edda;
	padding: 10px;
	border-radius: 4px;
}

/* Modern gaming theme */

:root {
	--gw-bg: #080b10;
	--gw-surface: rgba(15, 20, 28, 0.94);
	--gw-surface-strong: #121924;
	--gw-panel: #151d29;
	--gw-panel-soft: rgba(21, 29, 41, 0.86);
	--gw-line: rgba(116, 139, 167, 0.26);
	--gw-line-strong: rgba(95, 224, 255, 0.42);
	--gw-text: #e7edf5;
	--gw-muted: #9fb0c2;
	--gw-accent: #49d7ff;
	--gw-accent-strong: #1cb4e8;
	--gw-gold: #f2bd57;
	--gw-danger: #ef5a67;
	--gw-success: #3ee086;
	--gw-radius: 8px;
	--gw-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

html {
	min-height: 100%;
	background-color: var(--gw-bg);
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 16px 18px 64px;
	color: var(--gw-text);
	background:
		radial-gradient(circle at 15% 0%, rgba(73, 215, 255, 0.18), transparent 30rem),
		linear-gradient(135deg, rgba(242, 189, 87, 0.07), transparent 24rem),
		linear-gradient(180deg, #0b1119 0%, var(--gw-bg) 55%, #06080c 100%);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.55;
	text-align: center;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 65%);
}

main,
header,
footer {
	position: relative;
	z-index: 1;
}

b,
h2,
h3 {
	color: var(--gw-gold);
}

p {
	color: var(--gw-muted);
}

a:link,
a:visited {
	color: var(--gw-accent);
}

a:hover,
a:focus {
	color: var(--gw-gold);
}

header {
	width: min(1280px, 100%);
	margin: 0 auto 14px;
	z-index: 100;
}

header > .flex-container {
	display: block;
	overflow: visible;
	overflow-block: visible;
	overflow-inline: visible;
}

header > .flex-container > .link-container {
	width: 100%;
	padding: 12px;
	overflow: visible;
	overflow-block: visible;
	overflow-inline: visible;
	background: rgba(8, 12, 18, 0.78);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	box-shadow: var(--gw-shadow);
	backdrop-filter: blur(12px);
}

.site-brandbar {
	display: grid;
	grid-template-columns: minmax(220px, auto) minmax(280px, 1fr);
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.site-brand,
.site-brand:link,
.site-brand:visited {
	display: inline-grid;
	grid-template-columns: 42px auto;
	align-items: center;
	gap: 10px;
	color: var(--gw-text);
	text-align: left;
	text-decoration: none;
}

.site-brand-mark {
	width: 42px;
	height: 42px;
	background: url(../images/logo64x64.png) center / cover no-repeat, var(--gw-panel);
	border: 1px solid var(--gw-line-strong);
	border-radius: var(--gw-radius);
	box-shadow: 0 0 22px rgba(73, 215, 255, 0.18);
}

.site-brand-title {
	display: block;
	color: var(--gw-text);
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.site-brand-tagline {
	display: block;
	margin-top: 4px;
	color: var(--gw-muted);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.site-search {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
}

.site-search label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.site-search input {
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	color: var(--gw-text);
	background: rgba(5, 9, 14, 0.88);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	font-size: 0.95rem;
}

.site-search input:focus {
	border-color: var(--gw-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(73, 215, 255, 0.16);
}

.site-search button {
	min-height: 42px;
	padding: 10px 14px;
	color: #061018 !important;
	background: var(--gw-gold);
	border: 1px solid #ffe2a1;
	border-radius: var(--gw-radius);
	font-size: 0.84rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-search button:hover,
.site-search button:focus {
	background: #ffd777;
	outline: 2px solid rgba(73, 215, 255, 0.45);
	outline-offset: 2px;
}

.site-navigation {
	position: relative;
	z-index: 110;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.site-primary-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.site-primary-links li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
}

.site-primary-links li a,
.site-nav-menu summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	min-height: 42px;
	padding: 10px 14px;
	color: var(--gw-text) !important;
	background: rgba(21, 29, 41, 0.82);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
}

.site-primary-links li a:hover,
.site-primary-links li a:focus,
.site-nav-menu summary:hover,
.site-nav-menu summary:focus,
.site-nav-menu[open] summary {
	color: #061018 !important;
	background: var(--gw-accent);
	border-color: var(--gw-accent);
	transform: translateY(-1px);
}

.site-navigation-menus {
	position: relative;
	z-index: 120;
	display: flex;
	gap: 8px;
}

.site-nav-menu {
	position: relative;
}

.site-nav-menu summary {
	cursor: pointer;
	list-style: none;
}

.site-nav-menu summary::-webkit-details-marker {
	display: none;
}

.site-nav-menu summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.site-nav-menu[open] summary::after {
	transform: rotate(225deg) translate(-2px, -1px);
}

.site-nav-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1200;
	display: grid;
	gap: 6px;
	min-width: 190px;
	padding: 10px;
	background: rgba(10, 15, 22, 0.98);
	border: 1px solid var(--gw-line-strong);
	border-radius: var(--gw-radius);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.46);
	text-align: left;
}

.site-nav-dropdown a {
	padding: 9px 11px;
	color: var(--gw-text) !important;
	background: rgba(21, 29, 41, 0.82);
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 0.86rem;
	font-weight: 800;
	text-decoration: none;
}

.site-nav-dropdown a:hover,
.site-nav-dropdown a:focus {
	color: #061018 !important;
	background: var(--gw-gold);
	border-color: #ffe2a1;
}

.site-nav-dropdown .site-nav-notifications {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.site-nav-notifications span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	color: #061018;
	background: var(--gw-gold);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 900;
}

.site-nav-user {
	padding: 4px 8px 8px;
	color: var(--gw-gold);
	border-bottom: 1px solid var(--gw-line);
	font-size: 0.78rem;
	font-weight: 900;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.site-nav-dropdown .site-nav-logout {
	color: #fff !important;
	background: rgba(239, 90, 103, 0.18);
	border-color: rgba(239, 90, 103, 0.42);
}

.site-nav-dropdown .site-nav-logout:hover,
.site-nav-dropdown .site-nav-logout:focus {
	color: #fff !important;
	background: var(--gw-danger);
	border-color: var(--gw-danger);
}

.top-status-row {
	grid-template-columns: minmax(160px, 280px) minmax(220px, 1fr);
	margin-bottom: 10px;
}

.rank-top-trigger,
.rank-top-dropdown,
.online-users-container,
.session-check-box,
.rank-badge,
.blog-stat,
.blog-video-panel,
.blog-code-panel,
.profile-header,
.profile-panel,
.profile-video-card,
.admin-panel,
.file-item {
	background-color: var(--gw-panel-soft);
	border-color: var(--gw-line);
	border-radius: var(--gw-radius);
}

.rank-top-trigger,
.rank-top-dropdown {
	box-shadow: inset 0 0 0 1px rgba(73, 215, 255, 0.06);
}

.rank-top-trigger:hover,
.rank-top-trigger:focus {
	background-color: rgba(28, 180, 232, 0.16);
}

.rank-title,
.rank-cooldown,
.online-users-label,
.blog-kicker,
.blog-section-heading span,
.blog-post-topline,
.profile-header span,
.profile-section-heading span,
.admin-page .admin-titlebar h2,
.admin-layout .admin-sidebar h3,
.admin-section-heading h3,
.admin-table th,
.admin-reply-form label,
.home-kicker {
	color: var(--gw-gold);
}

.rank-count,
.rank-timer,
.online-user,
.blog-hero p,
.blog-post-body p,
.home-blog-list .blog-post-body p,
.blog-login-note p,
.blog-empty-state p,
.blog-more-link,
.profile-header p,
.profile-empty,
.profile-video-card p,
.admin-page .admin-titlebar p,
.admin-tool-panel p,
.file-name {
	color: var(--gw-muted);
}

.rank-meter,
.rank-progress {
	height: 10px;
	background-color: rgba(7, 10, 14, 0.9);
	border-color: var(--gw-line);
}

.rank-meter span,
.rank-progress span {
	background: linear-gradient(90deg, var(--gw-accent), var(--gw-gold));
}

main > .flex-container,
.file-manager-layout,
.admin-page .admin-layout {
	width: min(1280px, 100%);
	margin: 0 auto;
	gap: 14px;
}

div.text-container,
div.left-container,
div.center-container,
div.right-container,
div.form-container,
.blog-container,
.help-container,
.profile-container,
.file-manager-sidebar,
.file-manager-content,
.admin-layout .admin-sidebar,
.admin-layout .admin-content {
	background: var(--gw-surface);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.26);
}

div.text-container {
	width: min(1280px, 100%);
	margin: 0 auto 14px;
	height: auto;
	min-height: 0;
	padding: 16px 18px;
}

div.text-container h2 {
	margin: 0;
}

div.left-container,
div.center-container,
div.right-container {
	padding: 18px;
	overflow: auto;
}

div.left-container h2,
div.center-container h2,
div.right-container h2 {
	margin-top: 0;
}

.home-intro,
.blog-container,
.help-container,
.profile-container {
	background:
		linear-gradient(135deg, rgba(73, 215, 255, 0.08), rgba(242, 189, 87, 0.06) 42%, transparent 72%),
		var(--gw-surface);
	border-radius: var(--gw-radius);
}

.blog-hero,
.blog-editor,
.blog-newsletter,
.blog-media-picker,
.blog-post,
.blog-login-note,
.blog-empty-state,
.help-hero,
.help-panel {
	background-color: var(--gw-panel-soft);
	border-color: var(--gw-line);
	border-radius: var(--gw-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.blog-hero h2,
.blog-section-heading h3,
.blog-newsletter h3,
.blog-post h3,
.blog-login-note h3,
.blog-empty-state h3,
.help-hero h2,
.help-panel h3,
.profile-header h2,
.profile-section-heading h3,
.home-intro h2 {
	color: var(--gw-text);
}

.blog-post::before {
	background: linear-gradient(180deg, var(--gw-accent), var(--gw-gold));
}

.home-actions a,
.blog-editor button,
.blog-newsletter button,
.blog-media-item,
.blog-login-note a,
.help-panel a,
.profile-form button,
.profile-action-link,
.admin-table button,
.admin-danger-button,
.admin-tool-link,
button,
.btn-download,
.btn-danger-small,
.form-btn {
	border: 0;
	border-radius: var(--gw-radius);
	font-weight: 900;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.home-actions a,
.blog-editor button,
.blog-newsletter button,
.blog-media-item,
.blog-login-note a,
.help-panel a,
.profile-form button,
.profile-action-link,
.admin-table button,
.admin-tool-link,
button,
.btn-download,
.form-btn {
	color: #051019 !important;
	background: var(--gw-accent);
}

.home-actions a:hover,
.blog-editor button:hover,
.blog-newsletter button:hover,
.blog-media-item:hover,
.blog-login-note a:hover,
.help-panel a:hover,
.profile-form button:hover,
.profile-action-link:hover,
.admin-table button:hover,
.admin-tool-link:hover,
button:hover,
.btn-download:hover,
.form-btn:hover {
	color: #061018 !important;
	background: var(--gw-gold);
	transform: translateY(-1px);
}

.profile-page .profile-form button,
.profile-page .profile-action-link,
.profile-page .profile-quick-actions a,
.profile-page .profile-panel-toggle,
.profile-page .btn-download {
	color: #061018 !important;
	background: #f2bd57;
	border: 1px solid #ffe2a1;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
	text-shadow: none;
}

.profile-page .profile-form button:hover,
.profile-page .profile-action-link:hover,
.profile-page .profile-quick-actions a:hover,
.profile-page .btn-download:hover,
.profile-page .profile-form button:focus,
.profile-page .profile-action-link:focus,
.profile-page .profile-quick-actions a:focus,
.profile-page .profile-panel-toggle:hover,
.profile-page .profile-panel-toggle:focus,
.profile-page .btn-download:focus {
	color: #02070b !important;
	background: #ffd777;
	border-color: #fff0c7;
	outline: 2px solid rgba(73, 215, 255, 0.45);
	outline-offset: 2px;
}

.admin-danger-button,
.btn-danger-small {
	color: #fff !important;
	background: var(--gw-danger);
}

.admin-danger-button:hover,
.btn-danger-small:hover {
	background: #c93648;
}

.folder-item a,
.admin-tool-list a {
	color: var(--gw-accent);
	border: 1px solid transparent;
}

.folder-item a:hover,
.admin-tool-list a:hover {
	color: var(--gw-text);
	background: rgba(73, 215, 255, 0.1);
	border-color: var(--gw-line);
}

.folder-item.active a,
.admin-tool-list a.active {
	color: #061018;
	background: var(--gw-gold);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea,
.blog-editor input,
.blog-newsletter input,
.blog-editor textarea,
.profile-form input,
.profile-video-card input,
.profile-video-card textarea,
.admin-reply-form input,
.admin-reply-form textarea,
.form-inline input[type="text"],
.form-inline input[type="file"] {
	color: var(--gw-text);
	background-color: rgba(7, 10, 14, 0.88);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
}

input:focus,
textarea:focus,
.blog-editor input:focus,
.blog-newsletter input:focus,
.blog-editor textarea:focus,
.profile-form input:focus {
	border-color: var(--gw-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(73, 215, 255, 0.15);
}

.admin-table {
	color: var(--gw-muted);
}

.admin-table td {
	background-color: rgba(15, 20, 28, 0.9);
	border-color: var(--gw-line);
}

footer {
	color: var(--gw-muted);
	background: rgba(6, 8, 12, 0.92);
	border-top: 1px solid var(--gw-line);
}

.error {
	color: #ffd8dc;
	background: rgba(239, 90, 103, 0.15);
	border: 1px solid rgba(239, 90, 103, 0.42);
}

.success,
.form-success {
	color: #d7ffe7;
	background: rgba(62, 224, 134, 0.14);
	border: 1px solid rgba(62, 224, 134, 0.4);
}

.notifications-container {
	max-width: 920px;
}

.notifications-header,
.notifications-empty {
	padding: 20px;
	background: var(--gw-panel-soft);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
}

.notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.notifications-header span {
	color: var(--gw-gold);
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.notifications-header h2,
.notifications-empty h3 {
	margin: 4px 0 8px;
}

.notifications-header p,
.notifications-empty p {
	margin: 0;
	color: var(--gw-muted);
}

.notifications-header button,
.notifications-empty a {
	display: inline-flex;
	padding: 10px 14px;
	color: #061018 !important;
	background: var(--gw-gold) !important;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-weight: 900;
	text-decoration: none;
	white-space: nowrap;
}

.notifications-notice {
	margin: 14px 0;
	padding: 12px 14px;
}

.notifications-list {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.notification-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 16px;
	color: var(--gw-text) !important;
	background: rgba(15, 20, 28, 0.9);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	text-decoration: none;
}

.notification-item:hover,
.notification-item:focus {
	background: rgba(24, 34, 47, 0.96);
	border-color: var(--gw-accent);
}

.notification-item.is-unread {
	border-left: 4px solid var(--gw-gold);
}

.notification-status {
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	margin-top: 6px;
	background: var(--gw-muted);
	border-radius: 50%;
}

.notification-item.is-unread .notification-status {
	background: var(--gw-gold);
	box-shadow: 0 0 10px rgba(242, 189, 87, 0.55);
}

.notification-item small {
	display: block;
	margin-top: 5px;
	color: var(--gw-muted);
}

.notifications-empty {
	margin-top: 14px;
	text-align: center;
}

.notifications-empty a {
	margin-top: 14px;
}

.blog-media-item,
.blog-media-item:hover {
	color: var(--gw-text) !important;
	background-color: rgba(15, 20, 28, 0.95);
	border: 1px solid var(--gw-line);
	transform: none;
}

.blog-media-item:hover {
	border-color: var(--gw-accent);
}

.forum-container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	text-align: left;
}

.forum-hero,
.forum-panel,
.forum-topic-detail,
.forum-category-card,
.forum-topic-card,
.forum-reply-card {
	background: rgba(15, 20, 28, 0.92);
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	box-shadow: var(--gw-shadow);
}

.forum-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 22px;
}

.forum-kicker,
.forum-section-heading span,
.forum-topic-detail header span {
	color: var(--gw-gold);
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.forum-hero h2,
.forum-section-heading h3,
.forum-topic-detail h2,
.forum-empty h3 {
	margin: 5px 0 8px;
}

.forum-hero p,
.forum-empty p,
.forum-category-card span,
.forum-topic-card span,
.forum-topic-detail small,
.forum-reply-card small {
	color: var(--gw-muted);
}

.forum-stat {
	min-width: 116px;
	padding: 14px;
	text-align: center;
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	background: rgba(4, 8, 13, 0.55);
}

.forum-stat span {
	display: block;
	color: var(--gw-gold);
	font-size: 1.8rem;
	font-weight: 900;
}

.forum-primary-actions,
.forum-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0;
}

.forum-primary-actions a,
.forum-empty a,
.forum-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	color: #061018 !important;
	background: var(--gw-gold) !important;
	border: 1px solid #ffe2a1;
	border-radius: 6px;
	font-weight: 900;
	text-decoration: none;
}

.forum-breadcrumb {
	align-items: center;
	color: var(--gw-muted);
	font-weight: 800;
}

.forum-categories,
.forum-topic-list,
.forum-reply-list {
	display: grid;
	gap: 10px;
}

.forum-categories {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin: 14px 0;
}

.forum-category-card,
.forum-topic-card {
	display: grid;
	gap: 6px;
	padding: 15px;
	color: var(--gw-text) !important;
	text-decoration: none;
}

.forum-category-card:hover,
.forum-category-card:focus,
.forum-category-card.is-active,
.forum-topic-card:hover,
.forum-topic-card:focus {
	border-color: var(--gw-accent);
	background: rgba(24, 34, 47, 0.96);
}

.forum-category-card small,
.forum-topic-card small {
	color: var(--gw-gold);
	font-weight: 900;
}

.forum-panel,
.forum-topic-detail {
	margin-top: 14px;
	padding: 18px;
}

.forum-section-heading {
	margin-bottom: 12px;
}

.forum-topic-card {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.forum-topic-card strong {
	display: block;
	margin-bottom: 4px;
}

.forum-topic-detail header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.forum-topic-detail header > div,
.forum-reply-card header > div {
	min-width: 0;
}

.forum-topic-detail p,
.forum-reply-card p {
	margin: 0;
	color: var(--gw-text);
	text-align: left;
}

.forum-reply-card {
	padding: 14px;
	box-shadow: none;
}

.forum-reply-card header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.forum-reply-card header small {
	display: block;
}

.forum-danger-button {
	flex: 0 0 auto;
	padding: 7px 10px;
	color: #fff !important;
	background: #8d2432 !important;
	border: 1px solid #c94a5d;
	border-radius: 6px;
	font-weight: 900;
	cursor: pointer;
}

.forum-danger-button:hover,
.forum-danger-button:focus {
	background: #ad2d3f !important;
}

.forum-form {
	display: grid;
	gap: 10px;
}

.forum-form label {
	color: var(--gw-gold);
	font-weight: 900;
}

.forum-form input,
.forum-form select,
.forum-form textarea {
	width: 100%;
	padding: 11px 12px;
	color: var(--gw-text);
	background: rgba(4, 8, 13, 0.86);
	border: 1px solid var(--gw-line);
	border-radius: 6px;
}

.forum-form textarea {
	resize: vertical;
}

.forum-notice,
.forum-empty {
	margin: 14px 0;
	padding: 12px 14px;
}

.forum-empty {
	text-align: center;
}

@media screen and (max-width: 760px) {
	body {
		padding: 10px 10px 64px;
	}

	.site-brandbar {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.site-brand {
		justify-self: start;
	}

	.site-search {
		grid-template-columns: 1fr;
		max-width: none;
	}

	.site-navigation {
		align-items: stretch;
		flex-direction: column;
	}

	.site-primary-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-primary-links li a {
		min-width: 0;
		font-size: 0.84rem;
	}

	.site-navigation-menus {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-nav-menu summary {
		width: 100%;
		min-width: 0;
		font-size: 0.84rem;
	}

	.site-nav-dropdown {
		position: static;
		width: 100%;
		margin-top: 6px;
	}

	.notifications-header {
		align-items: stretch;
		flex-direction: column;
	}

	.forum-topic-detail header,
	.forum-reply-card header {
		align-items: stretch;
		flex-direction: column;
	}

	.forum-danger-button {
		width: 100%;
	}

	.notifications-header button {
		width: 100%;
		justify-content: center;
	}

	.top-status-row {
		grid-template-columns: 1fr;
	}

	main > .flex-container,
	.file-manager-layout,
	.admin-page .admin-layout {
		flex-direction: column;
	}

	.home-intro,
	.home-content-grid,
	.help-grid,
	.forum-hero,
	.home-video-list,
	.live-feeds-grid,
	.videos-grid {
		grid-template-columns: 1fr;
	}

	.home-intro,
	.home-panel,
	.videos-hero {
		padding: 14px;
	}

	.videos-hero {
		display: grid;
	}

	.watch-panel {
		grid-template-columns: 1fr;
		padding: 12px;
	}

	.home-video-card:first-child {
		grid-column: auto;
	}

	div.left-container,
	div.center-container,
	div.right-container {
		width: 100%;
		height: auto;
		min-height: 0;
	}
}