:root {
	--sthd-accent: var(--zpc-accent, var(--color, #e83d58));
	--sthd-bg: #0b0d12;
	--sthd-section: #141820;
	--sthd-card: #1a1f2a;
	--sthd-border: #2a303d;
	--sthd-text: #f4f6fa;
	--sthd-muted: #a9b1bf;
}

#header,
#header .wrapper,
#header .topbar,
#header .tb-right,
#header .user-wrap {
	overflow: visible;
}

#header {
	z-index: 10030 !important;
}

#header .user-wrap {
	position: relative;
	z-index: 10040;
}

#header .user-menu {
	right: 0;
	left: auto;
	z-index: 10050;
	width: 210px;
	min-width: 210px;
	max-width: calc(100vw - 24px);
	padding: 8px 0;
	border: 1px solid var(--sthd-border);
	border-radius: 10px;
	background: #141820;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
}

#header .user-menu li,
#header .user-menu li a {
	width: 100%;
}

#header .user-menu li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	color: var(--sthd-text);
}

#header .user-menu li a:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff;
}

#header .user-menu .sthd-account-logout {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--sthd-border);
}

.sthd-header-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 17.5px 12px 17.5px 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 9px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.sthd-header-bell:hover {
	border-color: var(--sthd-accent);
	color: #fff;
}

.sthd-header-bell i,
.sthd-header-bell svg {
	position: static !important;
	float: none !important;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	color: #fff;
}

.sthd-bell-count {
	position: absolute;
	top: -6px;
	right: -7px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border: 2px solid #0b0d12;
	border-radius: 999px;
	background: var(--sthd-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

/* Author CSS always wins over the browser's built-in [hidden] rule when
   there's a class-based display declaration on the same element (origin
   beats specificity in the cascade) — without this, community.js setting
   count.hidden = true would have no visible effect and the badge would
   stay on screen showing "0" even with no unread notifications. */
.sthd-bell-count[hidden] {
	display: none;
}

.sthd-community-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 18px 0 4px;
}

.player-qbtn .btn-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.sthd-community-actions.is-player-actions {
	order: -10;
	width: auto;
	margin: 0;
	gap: 8px;
}

.sthd-community-actions.is-player-actions .sthd-list-button,
.sthd-community-actions.is-player-actions .sthd-follow-button {
	min-height: 48px;
	border-color: var(--sthd-accent);
	background: var(--sthd-accent);
	color: #fff;
}

.sthd-list-button,
.sthd-follow-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--sthd-border);
	border-radius: 10px;
	background: var(--sthd-card);
	color: var(--sthd-text);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.sthd-list-button:hover,
.sthd-follow-button:hover,
.sthd-list-button.is-added,
.sthd-follow-button.is-following {
	border-color: var(--sthd-accent);
	background: var(--sthd-accent);
	color: #fff;
}

.sthd-modal-open {
	overflow: hidden;
}

.sthd-list-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 18px;
}

.sthd-list-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .78);
	backdrop-filter: blur(5px);
}

.sthd-list-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 510px);
	max-height: calc(100vh - 36px);
	padding: 26px;
	overflow-y: auto;
	border: 1px solid var(--sthd-border);
	border-radius: 15px;
	background: #251225;
	color: var(--sthd-text);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.sthd-list-dialog header {
	position: static;
	display: flex;
	align-items: center;
	gap: 14px;
	width: auto;
	margin: 0 0 18px;
}

.sthd-list-dialog header > i,
.sthd-list-dialog header > svg {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 14px;
	border-radius: 9px;
	background: rgba(232, 61, 88, .16);
	color: var(--sthd-accent);
}

.sthd-list-dialog h2 {
	margin: 0;
	color: var(--sthd-text);
	font-size: 23px;
}

.sthd-list-dialog > p {
	color: var(--sthd-muted);
}

.sthd-list-choices {
	display: grid;
	gap: 9px;
	margin: 16px 0 22px;
}

.sthd-list-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sthd-list-choice span {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: rgba(0, 0, 0, .31);
	color: var(--sthd-muted);
	cursor: pointer;
}

.sthd-list-choice input:checked + span {
	border-color: var(--sthd-accent);
	background: rgba(232, 61, 88, .12);
	color: var(--sthd-text);
}

.sthd-list-choice input:focus-visible + span {
	outline: 2px solid var(--sthd-accent);
	outline-offset: 2px;
}

.sthd-list-choice i,
.sthd-list-choice svg {
	color: #fff;
}

.sthd-list-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.sthd-modal-close,
.sthd-modal-save,
.sthd-modal-remove {
	min-height: 48px;
	border: 0;
	border-radius: 10px;
	font-weight: 750;
	cursor: pointer;
}

.sthd-modal-close {
	background: rgba(0, 0, 0, .35);
	color: #fff;
}

.sthd-modal-save {
	background: var(--sthd-accent);
	color: #fff;
}

.sthd-modal-remove {
	width: 100%;
	margin-top: 10px;
	background: transparent;
	color: var(--sthd-muted);
}

.sthd-modal-message,
.sthd-form-message {
	min-height: 20px;
	margin: 12px 0 0;
	color: var(--sthd-text);
}

.sthd-profile-shell {
	width: 100%;
	margin: 0 0 40px;
	color: var(--sthd-text);
}

.sthd-profile-hero {
	position: relative;
	width: 100%;
	padding: 36px 24px 0;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--sthd-accent) 44%, #301329), #321427 55%, #1b101d);
	text-align: center;
}

.sthd-profile-avatar img {
	width: 104px;
	height: 104px;
	border: 4px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	object-fit: cover;
}

.sthd-avatar-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sthd-avatar-initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sthd-accent), #7a1f63);
	color: #fff;
	font-weight: 700;
	letter-spacing: .5px;
	user-select: none;
}

.sthd-avatar-wrap img {
	position: relative;
	z-index: 1;
}

.sthd-profile-hero h1 {
	margin: 12px 0 10px;
	color: #fff;
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 500;
}

.sthd-profile-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px 26px;
	color: #fff;
	font-size: 14px;
}

.sthd-profile-stats span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sthd-profile-tabs {
	display: flex;
	justify-content: center;
	gap: clamp(10px, 4vw, 48px);
	margin: 34px auto 0;
}

.sthd-profile-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 0 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.sthd-profile-tab::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	content: '';
}

.sthd-profile-tab:hover,
.sthd-profile-tab.is-active {
	color: #ffd166;
}

.sthd-profile-tab.is-active::after {
	background: #ffd166;
}

.sthd-profile-tab b {
	display: grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--sthd-accent);
	color: #fff;
	font-size: 10px;
}

.sthd-profile-content {
	padding: 38px;
	border: 1px solid var(--sthd-border);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	background: var(--sthd-section);
}

.sthd-profile-panel h2 {
	margin: 0 0 24px;
	color: var(--sthd-text);
}

.sthd-profile-form {
	display: grid;
	gap: 20px;
	max-width: 760px;
}

.sthd-profile-form > label {
	display: grid;
	gap: 8px;
}

.sthd-profile-form input[type="text"],
.sthd-profile-form input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--sthd-border);
	border-radius: 9px;
	background: var(--sthd-card);
	color: var(--sthd-text);
}

.sthd-profile-form fieldset {
	display: grid;
	gap: 12px;
	margin: 4px 0;
	padding: 18px;
	border: 1px solid var(--sthd-border);
	border-radius: 10px;
}

.sthd-profile-form legend {
	padding: 0 8px;
	font-weight: 700;
}

.sthd-check {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sthd-primary-button,
.sthd-secondary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--sthd-accent);
	border-radius: 9px;
	background: var(--sthd-accent);
	color: #fff !important;
	font-weight: 750;
	text-decoration: none;
	cursor: pointer;
}

.sthd-secondary-button {
	background: transparent;
}

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

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

.sthd-notification-tools,
.sthd-notification-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sthd-danger-button {
	border-color: #c4434f;
	color: #ffb5bc !important;
}

.sthd-history-message {
	min-height: 20px;
	margin: -10px 0 14px;
	color: var(--sthd-muted);
}

.sthd-history-list,
.sthd-notification-list {
	display: grid;
	gap: 12px;
}

.sthd-history-item,
.sthd-notification {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 13px;
	border: 1px solid var(--sthd-border);
	border-radius: 11px;
	background: var(--sthd-card);
}

.sthd-history-poster {
	width: 78px;
	height: 104px;
	border-radius: 7px;
	object-fit: cover;
}

.sthd-history-item h3,
.sthd-notification h3 {
	margin: 0 0 5px;
	color: var(--sthd-text);
	font-size: 16px;
}

.sthd-history-item p,
.sthd-notification p,
.sthd-notification time {
	margin: 0 0 7px;
	color: var(--sthd-muted);
}

.sthd-history-details {
	min-width: 0;
}

.sthd-history-details strong {
	color: var(--sthd-text);
}

.sthd-history-details small {
	display: block;
	margin-top: 7px;
	color: var(--sthd-muted);
}

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

.sthd-history-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--sthd-border);
	border-radius: 9px;
	background: #343b49;
	color: #fff;
	cursor: pointer;
}

.sthd-history-delete:hover {
	border-color: #c4434f;
	background: #8f303a;
}

.sthd-history-delete:disabled,
[data-sthd-history-clear]:disabled {
	opacity: .55;
	cursor: wait;
}

.sthd-progress {
	width: 100%;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: #0e1118;
}

.sthd-progress span {
	display: block;
	height: 100%;
	background: var(--sthd-accent);
}

.sthd-list-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.sthd-list-filters a {
	padding: 9px 13px;
	border: 1px solid var(--sthd-border);
	border-radius: 999px;
	background: var(--sthd-card);
	color: var(--sthd-muted);
}

.sthd-list-filters a:hover,
.sthd-list-filters a.is-active {
	border-color: var(--sthd-accent);
	background: var(--sthd-accent);
	color: #fff;
}

.sthd-watch-grid,
.sthd-home-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.sthd-watch-card,
.sthd-home-card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--sthd-border);
	border-radius: 10px;
	background: var(--sthd-card);
}

.sthd-watch-card > a,
.sthd-home-card > a {
	position: relative;
	display: block;
	color: #fff;
}

.sthd-watch-poster,
.sthd-home-poster,
.sthd-poster-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: #11151d;
}

.sthd-watch-card h3,
.sthd-home-card h3 {
	margin: 0;
	padding: 10px 11px 5px;
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sthd-watch-card > span {
	display: block;
	padding: 0 11px 8px;
	color: var(--sthd-muted);
	font-size: 12px;
}

.sthd-watch-card > button {
	width: 100%;
	min-height: 38px;
	border: 0;
	border-top: 1px solid var(--sthd-border);
	background: transparent;
	color: var(--sthd-text);
	cursor: pointer;
}

.sthd-notification {
	grid-template-columns: 44px minmax(0, 1fr) auto;
}

.sthd-notification > i,
.sthd-notification > svg {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 13px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--sthd-muted);
}

.sthd-notification.is-unread {
	border-color: color-mix(in srgb, var(--sthd-accent) 60%, var(--sthd-border));
	background: color-mix(in srgb, var(--sthd-accent) 8%, var(--sthd-card));
}

.sthd-notification.is-unread > i,
.sthd-notification.is-unread > svg {
	background: var(--sthd-accent);
	color: #fff;
}

.sthd-notification-actions > a,
.sthd-notification-actions > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 9px 13px;
	border: 0;
	border-radius: 8px;
	background: var(--sthd-accent);
	color: #fff;
	cursor: pointer;
}

.sthd-notification-actions > button {
	background: #343b49;
}

.sthd-empty,
.sthd-login-required {
	padding: 28px;
	border: 1px dashed var(--sthd-border);
	border-radius: 10px;
	color: var(--sthd-muted);
	text-align: center;
}

.sthd-home-module {
	width: 100%;
	margin: 28px 0;
	padding: 0;
}

.sthd-home-module-heading {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: auto;
	margin: 0 0 16px;
}

.sthd-home-module-heading h2 {
	margin: 0;
	color: var(--sthd-text);
	font-size: clamp(21px, 3vw, 28px);
}

.sthd-home-module-heading > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 17px;
	border: 1px solid var(--sthd-accent);
	border-radius: 9px;
	background: var(--sthd-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.sthd-home-card-overlay {
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .92));
}

.sthd-home-card h3 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 36px 10px 11px;
}

.sthd-card-label {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 2;
	padding: 5px 8px;
	border-radius: 6px;
	background: var(--sthd-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

@media (max-width: 1100px) {
	.sthd-watch-grid,
	.sthd-home-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 949px) {
	.sthd-header-bell {
		height: 38px;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	.sthd-profile-tabs {
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: thin;
	}

	.sthd-profile-tab {
		flex: 0 0 auto;
	}

	.sthd-profile-content {
		padding: 24px;
	}
}

@media (max-width: 700px) {
	.sthd-watch-grid,
	.sthd-home-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sthd-history-item {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.sthd-history-poster {
		width: 62px;
		height: 88px;
	}

	.sthd-history-actions {
		grid-column: 1 / -1;
		justify-content: stretch;
	}

	.sthd-history-actions > * {
		flex: 1 1 0;
	}
}

@media (max-width: 520px) {
	#header .user-menu {
		right: 0;
		width: min(210px, calc(100vw - 20px));
		min-width: 0;
	}

	.sthd-header-bell {
		width: 36px;
		min-width: 36px;
		margin-right: 8px;
	}

	.sthd-community-actions,
	.sthd-list-actions {
		grid-template-columns: 1fr;
	}

	.sthd-list-button,
	.sthd-follow-button {
		width: 100%;
	}

	.player-qbtn .btn-left {
		width: 100%;
	}

	.sthd-community-actions.is-player-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		margin-bottom: 4px;
	}

	.sthd-community-actions.is-player-actions .sthd-list-button,
	.sthd-community-actions.is-player-actions .sthd-follow-button {
		width: 100%;
		min-width: 0;
		padding: 0 10px;
		font-size: 12px;
	}

	.sthd-list-dialog {
		padding: 20px;
	}

	.sthd-profile-hero {
		padding: 26px 14px 0;
	}

	.sthd-profile-avatar img {
		width: 82px;
		height: 82px;
	}

	.sthd-profile-stats {
		gap: 9px 14px;
		font-size: 12px;
	}

	.sthd-profile-tabs {
		margin-top: 22px;
		gap: 4px;
	}

	.sthd-profile-tab {
		min-height: 52px;
		padding: 0 10px;
		font-size: 13px;
	}

	.sthd-profile-content {
		padding: 18px 13px;
	}

	.sthd-watch-grid,
	.sthd-home-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.sthd-notification {
		grid-template-columns: 38px minmax(0, 1fr);
	}

	.sthd-notification-actions {
		grid-column: 1 / -1;
	}

	.sthd-notification-actions > a,
	.sthd-notification-actions > button {
		flex: 1 1 auto;
	}

	.sthd-panel-heading,
	.sthd-home-module-heading {
		align-items: flex-start;
	}

	.sthd-panel-heading {
		flex-direction: column;
	}

	.sthd-panel-heading [data-sthd-history-clear] {
		width: 100%;
	}

	.sthd-home-module-heading > a {
		min-height: 38px;
		padding: 0 12px;
		font-size: 11px;
	}
}