/**
 * 4System YouTube Dashboard — Frontend Styles
 * Version: 1.8.7
 * Update v1.8.0: Komplett neues Design — Dark Theme, Sidebar-Navigation, moderne Video-Karten.
 * Update v1.8.1: Farbpalette korrigiert (Secondary #DB3C2A, Primary #FF0000), Topbar/Sidebar-Fixes.
 * Update v1.8.2: Fixed Topbar & Sidebar, Topbar über volle Breite, .foursys-yt-body Container.
 * Update v1.8.3: Sidebar-Design überarbeitet — Titel, Badge-Größe, Nav-Spacing, Active-State.
 * Update v1.8.5: Suchfeld redesigned — #2A2A2A, 7px Rundung, kein Rand, Icon rechts.
 */

/* ============================================================================
   Root & Global Styles
   ============================================================================ */

:root {
	--foursys-bg-primary: #1a1a1a;
	--foursys-bg-secondary: #141414;
	--foursys-bg-card: #242424;
	/* Update v1.8.1: Farbpalette aus Design-System — Secondary überall, Primary nur YouTube-Button */
	--foursys-accent: #DB3C2A;
	--foursys-accent-primary: #FF0000;
	--foursys-accent-tertiary: #007BFC;
	--foursys-neutral: #0F0F0F;
	--foursys-text-primary: #ffffff;
	--foursys-text-secondary: #999999;
	--foursys-text-muted: #666666;
	--foursys-border: #333333;
	--foursys-hover-bg: rgba(255, 255, 255, 0.05);
	/* Update v1.8.2: Layout-Dimensionen für fixed Topbar & Sidebar */
	--foursys-topbar-height: 72px;
	--foursys-sidebar-width: 220px;
}

* {
	box-sizing: border-box;
}

/* Update v1.8.7: body.foursys-fullscreen entfernt — Fullscreen-Feature gestrichen */

/* Update v1.8.7: Kaum sichtbare Scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.08) var(--foursys-bg-primary, #1a1a1a);
}

*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-track {
	background: var(--foursys-bg-primary, #1a1a1a);
}

*::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   Wrapper & Layout
   ============================================================================ */

/* Update v2.6.8: Blocksy-Theme-Header ausblenden — Plugin hat eigene Topbar */
header.ct-header {
	display: none !important;
}

/* Update v1.8.2: Wrapper ist jetzt ein Spalten-Container (Topbar oben, Body darunter) */
.foursys-yt-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--foursys-bg-primary);
	color: var(--foursys-text-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

/* Update v1.8.2: Body-Container (Sidebar + Main) unterhalb des fixed Topbar */
.foursys-yt-body {
	display: flex;
	flex: 1;
	padding-top: var(--foursys-topbar-height);
}

/* Update v1.8.7: .foursys-yt-wrapper--fullscreen entfernt — Fullscreen-Feature gestrichen */

/* ============================================================================
   Sidebar Navigation
   ============================================================================ */

/* Update v1.8.2: Sidebar fixed links, unterhalb der Topbar */
.foursys-yt-sidebar {
	width: var(--foursys-sidebar-width);
	background-color: var(--foursys-bg-secondary);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: var(--foursys-topbar-height);
	left: 0;
	bottom: 0;
	padding: 24px 16px;
	border-right: 1px solid var(--foursys-border);
	z-index: 90;
	overflow-y: auto;
}

/* Update v1.8.3: Sidebar-Header Styles wie Design-Vorlage */
/* Update v2.5.9: margin-bottom von 36px auf 16px reduziert (Menüpunkte 20px höher) */
.foursys-yt-sidebar__header {
	margin-bottom: 16px;
}

.foursys-yt-sidebar__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--foursys-accent);
	font-style: italic;
	margin: 0 0 16px 0;
}

/* Update v1.8.4: Badge-Farbe #FF5540 */
.foursys-yt-sidebar__badge {
	color: #FF5540;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 0;
	line-height: 1.2;
}

.foursys-yt-sidebar__badge-sub {
	color: var(--foursys-text-muted);
	font-size: 13px;
	display: block;
	margin-top: 4px;
	font-weight: 400;
}

/* Update v1.8.3: Nav-Styles wie Design-Vorlage — mehr Spacing, größere Schrift */
.foursys-yt-sidebar__nav {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.foursys-yt-sidebar__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 0;
	color: var(--foursys-text-secondary);
	font-size: 15px;
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	width: calc(100% + 16px);
	margin-left: -16px;
	padding-left: 29px;
	position: relative;
	font-weight: 400;
}

.foursys-yt-sidebar__item:hover {
	color: var(--foursys-text-primary);
	background-color: var(--foursys-hover-bg);
}

/* Update v1.8.4: Active-State — Balken #FF5540, Text+Icon #FFB4A8 */
.foursys-yt-sidebar__item--active {
	color: #FFB4A8;
	background-color: rgba(255, 85, 64, 0.08);
	border-left: 3px solid #FF5540;
	font-weight: 500;
}

.foursys-yt-sidebar__item svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.foursys-yt-sidebar__refresh {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: var(--foursys-text-secondary);
	font-size: 13px;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	width: 100%;
	text-align: left;
	transition: all 0.2s ease;
}

.foursys-yt-sidebar__refresh:hover {
	color: var(--foursys-text-primary);
	background-color: var(--foursys-hover-bg);
}

.foursys-yt-sidebar__refresh svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* Update v2.0.3: Supadata Credit-Anzeige in der Sidebar (nur für Admins) */
.foursys-yt-sidebar__credits {
	padding: 10px 12px;
	margin-top: 12px;
	background: var(--foursys-bg-card);
	border-radius: 8px;
	border: 1px solid var(--foursys-border);
}

.foursys-yt-sidebar__credits-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--foursys-text-muted);
	margin-bottom: 6px;
}

.foursys-yt-sidebar__credits-bar-wrap {
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.foursys-yt-sidebar__credits-bar {
	height: 100%;
	border-radius: 3px;
	transition: width 0.6s ease, background 0.3s;
	background: #00a32a;
}

.foursys-yt-sidebar__credits-bar--warn {
	background: #dba617;
}

.foursys-yt-sidebar__credits-bar--danger {
	background: #d63638;
}

.foursys-yt-sidebar__credits-info {
	font-size: 11px;
	color: var(--foursys-text-muted);
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
}

.foursys-yt-sidebar__credits-loading {
	font-size: 11px;
	color: var(--foursys-text-muted);
}

.foursys-yt-sidebar__credits-error {
	font-size: 11px;
	color: #d63638;
}

.foursys-yt-sidebar__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--foursys-border);
	margin-top: 16px;
}

.foursys-yt-sidebar__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.foursys-yt-sidebar__avatar--placeholder {
	background-color: var(--foursys-bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--foursys-text-secondary);
}

.foursys-yt-sidebar__user-info {
	flex: 1;
	min-width: 0;
}

.foursys-yt-sidebar__user-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--foursys-text-primary);
	margin: 0;
	line-height: 1.4;
}

.foursys-yt-sidebar__user-since {
	font-size: 12px;
	color: var(--foursys-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* ============================================================================
   Main Content Area
   ============================================================================ */

/* Update v1.8.6: Main-Bereich — padding-top von 40px auf 22px reduziert */
.foursys-yt-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--foursys-bg-primary);
	margin-left: var(--foursys-sidebar-width);
	padding-top: 22px;
}

/* ============================================================================
   Top Bar (Search & Buttons)
   ============================================================================ */

/* Update v1.8.2: Topbar fixed über volle Breite, Hintergrund wie Sidebar */
/* Update v1.8.4: Topbar padding-left = Sidebar padding (16px) für Flucht mit Badge */
.foursys-yt-topbar {
	display: flex;
	align-items: center;
	padding: 0 32px 0 16px;
	gap: 20px;
	background-color: var(--foursys-bg-secondary);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--foursys-topbar-height);
	z-index: 100;
	border-bottom: 1px solid var(--foursys-border);
}

/* Update v2.5.2: Desktop — inner Divs verwenden display:contents
   damit alle Kinder (Titel, Search, YouTube-Btn) in einer Flex-Zeile landen. */
.foursys-yt-topbar__title-row,
.foursys-yt-topbar__search-row {
	display: contents;
}

/* Update v1.8.4: Topbar-Titel — linksbündig mit Sidebar-Badge, größere Schrift wie Content-Heading */
.foursys-yt-topbar__title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--foursys-text-primary);
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Update v2.6.3: Logo in der Topbar */
.foursys-yt-topbar__logo-link {
	display: inline-block;
	line-height: 0;
	flex-shrink: 0;
}

/* Update v2.6.4: max-height als Fallback, Inline-Style für Breite hat Vorrang */
.foursys-yt-topbar__logo {
	max-height: 36px;
	max-width: 100%;
	display: block;
	object-fit: contain;
}

/* Update v1.8.5.1: Suchfeld — kein Rand, #2A2A2A Hintergrund, 7px Rundung, Icon rechts */
.foursys-yt-topbar__search {
	flex: 0 1 560px;
	display: flex;
	align-items: center;
	background-color: #2A2A2A;
	border-radius: 7px;
	padding: 0 12px;
	gap: 10px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 auto;
	height: 42px;
}

.foursys-yt-topbar__search:focus-within,
.foursys-yt-topbar__search:focus,
.foursys-yt-topbar__search:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.foursys-yt-topbar__search-btn {
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.foursys-yt-topbar__search-btn svg,
.foursys-yt-topbar__search svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: #A9A7A6;
}

/* Update v1.8.5.1: Input — alle Browser-/Theme-Defaults explizit überschreiben */
.foursys-yt-topbar__search .foursys-yt-topbar__input,
.foursys-yt-topbar__search .foursys-yt-topbar__input:focus,
.foursys-yt-topbar__search .foursys-yt-topbar__input:active,
.foursys-yt-topbar__search .foursys-yt-topbar__input:hover {
	background: transparent;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #A9A7A6;
	font-size: 14px;
	width: 100%;
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
}

.foursys-yt-topbar__search .foursys-yt-topbar__input::placeholder {
	color: #A9A7A6 !important;
	opacity: 1;
}

.foursys-yt-topbar__search .foursys-yt-topbar__input::-webkit-input-placeholder {
	color: #A9A7A6 !important;
	opacity: 1;
}

/* Update v1.8.2: YouTube-Button nutzt Primary Red (#FF0000), immer rechtsbündig */
.foursys-yt-topbar__youtube-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--foursys-accent-primary);
	color: var(--foursys-text-primary);
	padding: 10px 20px;
	border-radius: 24px;
	border: none;
	font-size: 13px;
	margin-left: auto;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.2s ease;
}

.foursys-yt-topbar__youtube-btn:hover {
	background-color: #cc0000;
	color: var(--foursys-text-primary);
	text-decoration: none;
}

.foursys-yt-topbar__youtube-btn svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* ============================================================================
   Update v1.9.0: Hamburger-Menü + Sidebar-Overlay (Desktop: hidden)
   ============================================================================ */

.foursys-yt-hamburger {
	display: none; /* Nur auf Mobile sichtbar */
	flex-shrink: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	transition: background-color 0.2s ease;
}

.foursys-yt-hamburger:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.foursys-yt-hamburger__line {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--foursys-text-primary);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Overlay */
.foursys-yt-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.foursys-yt-sidebar-overlay--visible {
	display: block;
	opacity: 1;
}

/* ============================================================================
   Update v1.8.8: Suche — Clear-Button und Keine-Treffer-Hinweis
   ============================================================================ */

.foursys-yt-search-clear {
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.foursys-yt-search-clear:hover {
	opacity: 1;
}

.foursys-yt-search-clear svg {
	width: 16px;
	height: 16px;
	color: #A9A7A6;
}

.foursys-yt-search-no-results {
	text-align: center;
	padding: 60px 20px;
	color: var(--foursys-text-secondary, #A9A7A6);
}

.foursys-yt-search-no-results svg {
	margin-bottom: 16px;
	opacity: 0.4;
	color: var(--foursys-text-secondary, #A9A7A6);
}

.foursys-yt-search-no-results p {
	margin: 0 0 8px;
	font-size: 15px;
	color: var(--foursys-text-secondary, #A9A7A6);
}

.foursys-yt-search-no-results p strong {
	color: var(--foursys-text-primary, #fff);
}

.foursys-yt-search-no-results__hint {
	font-size: 13px !important;
	opacity: 0.6;
}

/* ============================================================================
   Content Header (Title & View All)
   ============================================================================ */

/* Update v1.8.5.1: Content-Header padding auf 40px links/rechts */
.foursys-yt-content-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 0 40px;
	gap: 20px;
}

.foursys-yt-content-header__left {
	flex: 1;
	min-width: 0;
}

.foursys-yt-content-header__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--foursys-text-primary);
	margin: 0;
	line-height: 1.2;
}

.foursys-yt-content-header__subtitle {
	font-size: 14px;
	color: var(--foursys-text-secondary);
	margin-top: 4px;
}

.foursys-yt-content-header__view-all {
	color: var(--foursys-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.foursys-yt-content-header__view-all:hover {
	text-decoration: underline;
	color: var(--foursys-accent);
}

/* ============================================================================
   Video Grid
   ============================================================================ */

.foursys-yt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 0 32px 32px;
}

/* Update v2.3.2: Shorts-Grid gleich wie Home-Grid (16:9 Karten mit Info) */
.foursys-yt-grid--shorts {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* ============================================================================
   Video Card
   ============================================================================ */

.foursys-yt-card {
	background: transparent;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.foursys-yt-card:hover {
	transform: translateY(-2px);
}

.foursys-yt-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.foursys-yt-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--foursys-bg-card);
}

/* Update v1.8.6: !important gegen Theme-Overrides */
.foursys-yt-card__thumb--short {
	aspect-ratio: 9 / 16 !important;
}

.foursys-yt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.foursys-yt-card__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background-color: rgba(0, 0, 0, 0.8);
	color: var(--foursys-text-primary);
	font-size: 12px;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 4px;
}

/* Update v2.3.7: Roter Wiedergabefortschrittsbalken auf Video-Karten */
.foursys-yt-card__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	z-index: 5;
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}

.foursys-yt-card__progress-fill {
	height: 100%;
	background: #FF0000;
	border-radius: 0;
	transition: width 0.3s ease;
}

.foursys-yt-card__bookmark {
	position: absolute;
	top: 8px;
	right: 8px;
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--foursys-text-primary);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: all 0.2s ease;
	padding: 0;
	flex-shrink: 0;
}

.foursys-yt-card__bookmark svg {
	width: 16px;
	height: 16px;
}

.foursys-yt-card:hover .foursys-yt-card__bookmark {
	opacity: 1;
}

.foursys-yt-card__bookmark--saved {
	opacity: 1;
	color: var(--foursys-accent);
}

/* Update v2.0.5: 3-Punkte-Kontextmenü — im Info-Bereich, immer sichtbar */
.foursys-yt-card__more-btn {
	background: none;
	color: var(--foursys-text-secondary, #AAAAAA);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
	padding: 0;
	flex-shrink: 0;
	margin-left: auto;
	align-self: flex-start;
	margin-top: 2px;
}

.foursys-yt-card__more-btn svg {
	width: 16px;
	height: 16px;
}

.foursys-yt-card__more-btn:hover {
	color: var(--foursys-text-primary, #E8E8E8);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Update v2.0.5: Klickbare Elemente — Cursor und Hover */
.foursys-yt-card__clickable {
	cursor: pointer;
}

.foursys-yt-card__avatar-link {
	cursor: pointer;
	flex-shrink: 0;
}

.foursys-yt-card__channel-link {
	cursor: pointer;
}

.foursys-yt-card__channel-link:hover {
	color: var(--foursys-text-primary, #E8E8E8);
}

.foursys-yt-card__title.foursys-yt-card__clickable:hover {
	color: var(--foursys-accent, #FF5540);
}

/* Update v2.0.6: Custom-Tooltip für gekürzte Titel */
.foursys-yt-tooltip {
	position: fixed;
	z-index: 9999;
	background-color: rgba(28, 28, 28, 0.92);
	color: #ccc;
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 8px;
	max-width: 320px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.foursys-yt-tooltip--visible {
	opacity: 1;
}

@media (max-width: 480px) {
	.foursys-yt-tooltip {
		max-width: calc(100vw - 32px);
	}
}

/* Kontextmenü-Dropdown */
.foursys-yt-ctx-menu {
	position: absolute;
	z-index: 1000;
	background-color: var(--foursys-bg-card, #1E1E1E);
	border: 1px solid var(--foursys-border, #333);
	border-radius: 12px;
	min-width: 240px;
	padding: 8px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	animation: foursys-ctx-fadein 0.15s ease;
}

@keyframes foursys-ctx-fadein {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.foursys-yt-ctx-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	cursor: pointer;
	color: var(--foursys-text-primary, #E8E8E8);
	font-size: 14px;
	line-height: 1.3;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	transition: background-color 0.15s ease;
}

.foursys-yt-ctx-menu__item:hover {
	background-color: var(--foursys-bg-hover, rgba(255, 255, 255, 0.08));
}

.foursys-yt-ctx-menu__item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--foursys-text-secondary, #AAAAAA);
}

.foursys-yt-ctx-menu__divider {
	height: 1px;
	background-color: var(--foursys-border, #333);
	margin: 4px 0;
}

/* Playlist-Untermenü */
/* Update v2.0.5: Scrollbares Playlist-Untermenü */
.foursys-yt-ctx-menu__submenu {
	padding: 4px 0 4px 0;
	max-height: 200px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--foursys-text-muted, #555) transparent;
}

.foursys-yt-ctx-menu__submenu::-webkit-scrollbar {
	width: 6px;
}

.foursys-yt-ctx-menu__submenu::-webkit-scrollbar-track {
	background: transparent;
}

.foursys-yt-ctx-menu__submenu::-webkit-scrollbar-thumb {
	background-color: var(--foursys-text-muted, #555);
	border-radius: 3px;
}

.foursys-yt-ctx-menu__playlist-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 32px;
	cursor: pointer;
	color: var(--foursys-text-secondary, #AAAAAA);
	font-size: 13px;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	transition: background-color 0.15s ease;
}

.foursys-yt-ctx-menu__playlist-item:hover {
	background-color: var(--foursys-bg-hover, rgba(255, 255, 255, 0.08));
	color: var(--foursys-text-primary, #E8E8E8);
}

.foursys-yt-ctx-menu__loading {
	padding: 8px 16px 8px 32px;
	color: var(--foursys-text-muted, #777);
	font-size: 13px;
}

.foursys-yt-card__info {
	display: flex;
	gap: 10px;
	padding: 12px 0 0;
	align-items: flex-start;
}

.foursys-yt-card__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	margin-top: 2px;
}

.foursys-yt-card__text {
	flex: 1;
	min-width: 0;
}

.foursys-yt-card__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--foursys-text-primary);
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.foursys-yt-card__channel {
	font-size: 13px;
	color: var(--foursys-text-secondary);
	display: block;
	margin-top: 2px;
}

.foursys-yt-card__meta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--foursys-text-muted);
	margin-top: 2px;
}

.foursys-yt-card__separator {
	color: var(--foursys-text-muted);
}

/* Update v1.8.6: !important gegen Theme-Overrides */
.foursys-yt-card--short .foursys-yt-card__thumb--short {
	aspect-ratio: 9 / 16 !important;
}

/* Update v1.8.6: img im Short-Thumb ebenfalls auf 9:16 fixieren */
.foursys-yt-card--short .foursys-yt-card__thumb--short .foursys-yt-card__img {
	aspect-ratio: 9 / 16 !important;
	object-fit: cover;
}

.foursys-yt-card--short .foursys-yt-card__info {
	display: none;
}

/* ============================================================================
   Tab Content & Panels
   ============================================================================ */

.foursys-yt-tab-content {
	flex: 1;
	padding-top: 8px;
	overflow-y: auto;
}

.foursys-yt-tab-panel {
	display: none;
}

.foursys-yt-tab-panel--active {
	display: block;
}

/* ============================================================================
   Loader & Spinner
   ============================================================================ */

.foursys-yt-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	gap: 12px;
	color: var(--foursys-text-secondary);
	font-size: 14px;
}

.foursys-yt-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--foursys-border);
	border-top-color: var(--foursys-accent);
	border-radius: 50%;
	animation: foursys-yt-spin 0.8s linear infinite;
}

.foursys-yt-spinner--small {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

@keyframes foursys-yt-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.foursys-yt-refresh-icon--spinning {
	animation: foursys-yt-spin 1s linear infinite;
}

.foursys-yt-end-message {
	text-align: center;
	color: var(--foursys-text-muted);
	padding: 24px;
	font-size: 14px;
}

/* ============================================================================
   Notice Boxes
   ============================================================================ */

.foursys-yt-notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 32px;
	text-align: center;
}

.foursys-yt-notice h3 {
	font-size: 20px;
	color: var(--foursys-text-primary);
	margin-bottom: 8px;
	margin-top: 0;
}

.foursys-yt-notice p {
	color: var(--foursys-text-secondary);
	max-width: 400px;
	margin: 0;
}

.foursys-yt-notice--inline {
	padding: 32px;
}

/* Update v2.7.4: Fehlermeldung-Styling (z.B. API-Quota erschöpft) */
.foursys-yt-notice--error {
	color: #f0a0a0;
}

.foursys-yt-notice__icon {
	color: var(--foursys-accent);
	margin-bottom: 16px;
	font-size: 32px;
}

.foursys-yt-notice__hint {
	color: var(--foursys-text-muted);
	font-size: 13px;
	margin-top: 8px;
}

/* ============================================================================
   Buttons
   ============================================================================ */

.foursys-yt-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	text-decoration: none;
	background: transparent;
	color: inherit;
}

.foursys-yt-btn--primary {
	background-color: var(--foursys-accent);
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--primary:hover {
	background-color: #c13020;
	color: var(--foursys-text-primary);
	text-decoration: none;
}

.foursys-yt-btn--youtube {
	background-color: var(--foursys-accent);
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--youtube:hover {
	background-color: #c13020;
	text-decoration: none;
}

.foursys-yt-btn--text {
	background: transparent;
	color: var(--foursys-text-secondary);
}

.foursys-yt-btn--text:hover {
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--small {
	padding: 6px 12px;
	font-size: 13px;
}

.foursys-yt-btn--disconnect {
	color: var(--foursys-accent);
}

.foursys-yt-btn--disconnect:hover {
	color: #c13020;
}

.foursys-yt-btn--ai-active {
	background-color: var(--foursys-bg-card);
	color: #cccccc;
	border: 1px solid var(--foursys-border);
}

.foursys-yt-btn--ai-active:hover {
	border-color: #555555;
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--ai-selected {
	background-color: var(--foursys-accent);
	color: var(--foursys-text-primary);
	border-color: var(--foursys-accent);
}

/* Update v2.5.0: KI-Button mit vorhandener gecachter Zusammenfassung — gleicher Stil wie ai-selected */
.foursys-yt-btn--ai-cached {
	background-color: var(--foursys-accent) !important;
	color: var(--foursys-text-primary) !important;
	border-color: var(--foursys-accent) !important;
}

.foursys-yt-btn--ai-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.foursys-yt-btn--tts {
	background-color: var(--foursys-bg-card);
	color: #cccccc;
	border: 1px solid var(--foursys-border);
}

.foursys-yt-btn--tts:hover {
	border-color: #555555;
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--retry {
	background-color: #333333;
	color: var(--foursys-text-primary);
}

.foursys-yt-btn--retry:hover {
	background-color: #444444;
}

.foursys-yt-btn svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* ============================================================================
   Channel Filter
   ============================================================================ */

.foursys-yt-channel-filter {
	padding: 0 32px 20px;
}

.foursys-yt-select {
	background-color: var(--foursys-bg-card);
	color: var(--foursys-text-primary);
	border: 1px solid var(--foursys-border);
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 14px;
	width: 100%;
	max-width: 400px;
	appearance: none;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M1 4l5 4 5-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

.foursys-yt-select:focus {
	border-color: var(--foursys-accent);
	color: var(--foursys-text-primary);
}

/* ============================================================================
   Detail View
   ============================================================================ */

.foursys-yt-detail {
	padding: 0 32px;
}

.foursys-yt-detail__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	gap: 16px;
}

.foursys-yt-detail__back {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--foursys-text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.foursys-yt-detail__back:hover {
	color: var(--foursys-text-primary);
}

.foursys-yt-detail__back svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Update v1.8.7: .foursys-yt-detail__fullscreen Styles entfernt — Button gestrichen */

.foursys-yt-detail__content {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	margin-bottom: 32px;
}

.foursys-yt-detail__content--short {
	grid-template-columns: 400px 1fr;
}

.foursys-yt-detail__main--short {
	max-width: 400px;
	margin: 0 auto;
}

.foursys-yt-detail__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background-color: #000000;
}

.foursys-yt-detail__player--short {
	aspect-ratio: 9 / 16;
}

.foursys-yt-detail__player iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Update v2.0.8: Skip-Overlay — Buttons links/rechts über dem Player */
.foursys-yt-skip-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.foursys-yt-detail__player:hover .foursys-yt-skip-overlay {
	opacity: 1;
}

.foursys-yt-skip-btn {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background 0.2s ease, transform 0.15s ease;
}

.foursys-yt-skip-btn:hover {
	background: rgba(255, 85, 64, 0.8);
	transform: scale(1.1);
}

.foursys-yt-skip-btn:active {
	transform: scale(0.95);
}

/* Update v2.1.1: Mobile — Skip-Overlay immer sichtbar (kein Hover auf Touch-Geräten) */
@media (max-width: 768px) {
	.foursys-yt-skip-overlay {
		opacity: 1;
	}
	.foursys-yt-skip-btn {
		width: 40px;
		height: 40px;
		background: rgba(0, 0, 0, 0.5);
	}
	.foursys-yt-skip-btn svg {
		width: 22px;
		height: 22px;
	}
}

/* Ultra-small mobile: noch kompaktere Buttons */
@media (max-width: 375px) {
	.foursys-yt-skip-btn {
		width: 36px;
		height: 36px;
	}
	.foursys-yt-skip-btn svg {
		width: 20px;
		height: 20px;
	}
}

/* Update v2.1.3: Eigener Vollbild-Button — unten rechts im Player */
.foursys-yt-fullscreen-toggle {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 25;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: 6px;
	color: #fff;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
	padding: 0;
}

.foursys-yt-detail__player:hover .foursys-yt-fullscreen-toggle {
	opacity: 1;
}

.foursys-yt-fullscreen-toggle:hover {
	background: rgba(0, 0, 0, 0.85);
}

/* Mobile: Vollbild-Button immer sichtbar (kein Hover auf Touch) */
@media (max-width: 768px) {
	.foursys-yt-fullscreen-toggle {
		opacity: 1;
		width: 36px;
		height: 36px;
		bottom: 10px;
		right: 10px;
	}
}

/* Update v2.1.3: Container-Fullscreen — Skip-Overlay sichtbar + Video zentriert */
.foursys-yt-detail__player:fullscreen,
.foursys-yt-detail__player:-webkit-full-screen {
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.foursys-yt-detail__player:fullscreen iframe,
.foursys-yt-detail__player:-webkit-full-screen iframe {
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: 100vh;
}

/* Update v2.1.3: Skip-Overlay + Vollbild-Button im Fullscreen immer sichtbar */
.foursys-yt-detail__player:fullscreen .foursys-yt-skip-overlay,
.foursys-yt-detail__player:-webkit-full-screen .foursys-yt-skip-overlay {
	opacity: 1;
	z-index: 20;
}

.foursys-yt-detail__player:fullscreen .foursys-yt-fullscreen-toggle,
.foursys-yt-detail__player:-webkit-full-screen .foursys-yt-fullscreen-toggle {
	opacity: 1;
	z-index: 25;
}

.foursys-yt-detail__info {
	margin-top: 16px;
}

.foursys-yt-detail__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--foursys-text-primary);
	margin: 0;
	line-height: 1.4;
}

.foursys-yt-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: var(--foursys-text-secondary);
	font-size: 13px;
}

.foursys-yt-detail__separator {
	color: var(--foursys-text-muted);
}

/* Update v2.2.3: .foursys-yt-detail__actions entfernt — ersetzt durch __action-bar */

.foursys-yt-detail__watchlist-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	background-color: var(--foursys-bg-card);
	color: #cccccc;
	border: 1px solid var(--foursys-border);
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s ease;
}

.foursys-yt-detail__watchlist-btn:hover {
	border-color: #555555;
	color: var(--foursys-text-primary);
}

.foursys-yt-detail__watchlist-btn--saved {
	color: var(--foursys-accent);
	border-color: var(--foursys-accent);
}

.foursys-yt-detail__watchlist-btn--saved:hover {
	background-color: rgba(219, 60, 42, 0.08);
}

.foursys-yt-detail__exclude-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	background-color: var(--foursys-bg-card);
	color: #cccccc;
	border: 1px solid var(--foursys-border);
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s ease;
}

.foursys-yt-detail__exclude-btn:hover {
	border-color: #555555;
	color: var(--foursys-text-primary);
}

.foursys-yt-detail__exclude-btn--excluded {
	color: var(--foursys-accent);
	border-color: var(--foursys-accent);
}

.foursys-yt-detail__exclude-btn--excluded:hover {
	background-color: rgba(219, 60, 42, 0.08);
}

/* Update v2.2.3: 3-Punkte-Button jetzt in Titel-Zeile (Styles dort definiert) */

/* =====================================================
 * Update v2.2.3: Titel-Zeile mit 3-Punkte rechts
 * ===================================================== */

.foursys-yt-detail__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.foursys-yt-detail__title-row .foursys-yt-detail__more-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	margin-left: auto;
}

.foursys-yt-detail__title-row .foursys-yt-detail__more-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
}

/* =====================================================
 * Update v2.2.3: Einzeilige Action-Bar
 * ===================================================== */

.foursys-yt-detail__action-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--foursys-border);
	flex-wrap: wrap;
}

/* Kanal-Gruppe: Avatar + Name + Abo-Zahl */
.foursys-yt-detail__channel-group {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
}

.foursys-yt-detail__channel-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	cursor: pointer;
	flex-shrink: 0;
}

.foursys-yt-detail__channel-avatar:hover {
	opacity: 0.8;
}

.foursys-yt-detail__channel-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.foursys-yt-detail__action-bar .foursys-yt-detail__channel {
	font-size: 14px;
	font-weight: 600;
	color: var(--foursys-text-primary);
	cursor: pointer;
	line-height: 1.2;
}

.foursys-yt-detail__action-bar .foursys-yt-detail__channel:hover {
	color: var(--foursys-accent);
}

.foursys-yt-detail__subscriber-count {
	font-size: 11px;
	color: #888;
	line-height: 1.2;
}

/* Abo-Button — ganz rechts */
.foursys-yt-detail__subscribe-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 20px;
	border: none;
	background-color: #fff;
	color: #0f0f0f;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	margin-left: auto;
}

.foursys-yt-detail__subscribe-btn:hover {
	background-color: #d9d9d9;
}

.foursys-yt-detail__subscribe-btn--subscribed {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ccc;
}

.foursys-yt-detail__subscribe-btn--subscribed:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.foursys-yt-detail__subscribe-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Like/Dislike-Pill */
.foursys-yt-detail__rating {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	overflow: hidden;
}

.foursys-yt-detail__like-btn,
.foursys-yt-detail__dislike-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: none;
	border: none;
	color: #ccc;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.foursys-yt-detail__like-btn--readonly,
.foursys-yt-detail__dislike-btn--readonly {
	cursor: default;
}

.foursys-yt-detail__like-btn:hover:not(.foursys-yt-detail__like-btn--readonly),
.foursys-yt-detail__dislike-btn:hover:not(.foursys-yt-detail__dislike-btn--readonly) {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.foursys-yt-detail__like-btn--active {
	color: var(--foursys-accent);
}

.foursys-yt-detail__dislike-btn--active {
	color: var(--foursys-accent);
}

.foursys-yt-detail__rating-divider {
	width: 1px;
	height: 20px;
	background-color: rgba(255, 255, 255, 0.15);
}

/* Update v2.0.9: Videobeschreibung + Kapitelmarken */
.foursys-yt-detail__description {
	margin-top: 20px;
	padding: 16px;
	background-color: var(--foursys-bg-card);
	border-radius: 12px;
	border: 1px solid var(--foursys-border);
}

.foursys-yt-detail__chapters {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--foursys-border);
}

.foursys-yt-detail__chapters-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--foursys-text-primary);
	margin-bottom: 10px;
}

.foursys-yt-detail__chapters-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.foursys-yt-detail__chapter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid transparent;
	color: var(--foursys-text-secondary);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.foursys-yt-detail__chapter-btn:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--foursys-text-primary);
	border-color: var(--foursys-border);
}

/* Update v2.1.0: Highlight-Farbe #FF5540 */
.foursys-yt-detail__chapter-btn--active {
	background-color: rgba(255, 85, 64, 0.15);
	border-color: #FF5540;
	color: #FF5540;
}

.foursys-yt-detail__chapter-time {
	font-weight: 600;
	color: #FF5540;
	font-variant-numeric: tabular-nums;
}

.foursys-yt-detail__chapter-btn--active .foursys-yt-detail__chapter-time {
	color: #FF5540;
}

.foursys-yt-detail__chapter-label {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.foursys-yt-detail__desc-text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--foursys-text-secondary);
	word-break: break-word;
}

.foursys-yt-detail__desc-text--collapsed {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.foursys-yt-detail__desc-link {
	color: var(--foursys-accent);
	text-decoration: none;
}

.foursys-yt-detail__desc-link:hover {
	text-decoration: underline;
}

.foursys-yt-detail__desc-toggle {
	background: none;
	border: none;
	color: var(--foursys-text-primary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 6px;
}

.foursys-yt-detail__desc-toggle:hover {
	color: var(--foursys-accent);
}

.foursys-yt-detail__ai {
	margin-top: 24px;
}

.foursys-yt-detail__ai-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.foursys-yt-detail__ai-hint {
	color: var(--foursys-text-muted);
	font-size: 13px;
	margin-top: 8px;
}

.foursys-yt-detail__summary {
	margin-top: 16px;
	padding: 20px;
	background-color: var(--foursys-bg-card);
	border-radius: 12px;
	color: #dddddd;
	line-height: 1.7;
	font-size: 14px;
}

.foursys-yt-summary__error {
	background-color: #2a1a1a;
	border: 1px solid #4a2020;
	border-radius: 8px;
	padding: 16px;
	color: var(--foursys-accent);
	font-size: 13px;
}

.foursys-yt-detail__audio-player {
	margin-top: 12px;
}

.foursys-yt-detail__sidebar {
	min-width: 0;
}

.foursys-yt-detail__sidebar-title {
	font-size: 16px;
	color: var(--foursys-text-primary);
	margin: 0 0 16px;
	font-weight: 600;
}

.foursys-yt-detail__sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Update v2.1.1: Sidebar-Karten — Desktop horizontal mit Avatar + 3-Punkte, Mobile vertikal */
.foursys-yt-detail__sidebar-item {
	display: flex;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	padding: 4px;
	transition: all 0.2s ease;
	cursor: pointer;
}

.foursys-yt-detail__sidebar-item:hover {
	background-color: var(--foursys-hover-bg);
}

.foursys-yt-detail__sidebar-thumb {
	width: 160px;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	background-color: var(--foursys-bg-card);
	cursor: pointer;
}

.foursys-yt-detail__sidebar-thumb--short {
	aspect-ratio: 9 / 16;
	width: 80px;
}

.foursys-yt-detail__sidebar-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Update v2.1.1: Info-Bereich mit Avatar, Text, 3-Punkte-Menü */
.foursys-yt-detail__sidebar-info {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}

.foursys-yt-detail__sidebar-text {
	flex: 1;
	min-width: 0;
}

.foursys-yt-detail__sidebar-item-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--foursys-text-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	line-height: 1.4;
	cursor: pointer;
}

.foursys-yt-detail__sidebar-item-title:hover {
	color: var(--foursys-accent);
}

.foursys-yt-detail__sidebar-channel {
	font-size: 12px;
	color: var(--foursys-text-secondary);
	margin: 0;
	line-height: 1.4;
	cursor: pointer;
}

.foursys-yt-detail__sidebar-channel:hover {
	color: var(--foursys-text-primary);
}

/* Update v2.1.1: Avatar im Sidebar-Item kleiner als im Grid */
.foursys-yt-detail__sidebar-info .foursys-yt-card__avatar {
	width: 24px;
	height: 24px;
}

/* Update v2.1.1: 3-Punkte-Button im Sidebar-Item */
.foursys-yt-detail__sidebar-info .foursys-yt-card__more-btn {
	width: 28px;
	height: 28px;
	margin-top: 0;
}

.foursys-yt-detail__sidebar-info .foursys-yt-card__more-btn svg {
	width: 14px;
	height: 14px;
}

/* Update v2.1.1: Meta-Infos im Sidebar-Item */
.foursys-yt-detail__sidebar-info .foursys-yt-card__meta {
	font-size: 11px;
	margin-top: 2px;
}

/* ============================================================================
   Shorts Feed (Vertical Snap Scroll)
   ============================================================================ */

.foursys-yt-shorts-feed {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

/* Update v1.9.3: Button vertikal mittig links neben dem Short positioniert */
.foursys-yt-shorts-feed__back {
	position: absolute;
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--foursys-text-primary);
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.foursys-yt-shorts-feed__back:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.foursys-yt-shorts-feed__back svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.foursys-yt-shorts-feed__scroll {
	height: 100%;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}

.foursys-yt-shorts-feed__item {
	height: 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.foursys-yt-shorts-feed__player {
	width: 100%;
	max-width: 400px;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	background-color: #000000;
}

.foursys-yt-shorts-feed__iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.foursys-yt-shorts-feed__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.foursys-yt-shorts-feed__info {
	max-width: 400px;
	width: 100%;
	margin-top: 16px;
	text-align: left;
}

.foursys-yt-shorts-feed__title {
	font-size: 16px;
	color: var(--foursys-text-primary);
	margin: 0;
	line-height: 1.4;
	font-weight: 500;
}

.foursys-yt-shorts-feed__meta {
	display: flex;
	gap: 8px;
	color: var(--foursys-text-secondary);
	font-size: 13px;
	margin-top: 4px;
}

.foursys-yt-shorts-feed__separator {
	color: var(--foursys-text-muted);
}

.foursys-yt-shorts-feed__nav {
	position: absolute;
	right: 24px;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--foursys-text-primary);
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.foursys-yt-shorts-feed__nav:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.foursys-yt-shorts-feed__nav svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.foursys-yt-shorts-feed__nav--up {
	top: 50%;
	transform: translateY(calc(-50% - 24px));
}

.foursys-yt-shorts-feed__nav--down {
	top: 50%;
	transform: translateY(calc(50% - 24px));
}

/* ============================================================================
   Settings Widget
   ============================================================================ */

.foursys-yt-settings {
	padding: 0 32px;
}

/* Update v2.7.2: Karten-Grid für Settings */
.foursys-yt-settings__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 960px;
	margin-bottom: 40px;
}

.foursys-yt-settings__card {
	background: var(--foursys-bg-card, #1e1e1e);
	border: 1px solid var(--foursys-border, #333);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.foursys-yt-settings__card:hover {
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.foursys-yt-settings__card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.foursys-yt-settings__card-icon--yt {
	background: rgba(219, 60, 42, 0.15);
	color: #DB3C2A;
}

.foursys-yt-settings__card-icon--playlist {
	background: rgba(139, 92, 246, 0.15);
	color: #a78bfa;
}

.foursys-yt-settings__card-icon--ai {
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
}

.foursys-yt-settings__card-icon--skip {
	background: rgba(245, 158, 11, 0.15);
	color: #fbbf24;
}

.foursys-yt-settings__card-icon--pwa {
	background: rgba(16, 185, 129, 0.15);
	color: #34d399;
}

.foursys-yt-settings__card-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--foursys-text-primary, #fff);
	margin: 0 0 6px;
}

.foursys-yt-settings__card-desc {
	color: var(--foursys-text-secondary, #999);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.foursys-yt-settings__card-unit {
	color: var(--foursys-text-secondary, #aaa);
	font-size: 13px;
	white-space: nowrap;
}

.foursys-yt-settings__card .foursys-yt-settings__field {
	margin-top: auto;
}

.foursys-yt-settings__card .foursys-yt-settings__connection {
	margin-bottom: 12px;
}

/* Update v2.7.2: PWA-Karte — volle Breite */
.foursys-yt-settings__card--pwa {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
	border-color: rgba(16, 185, 129, 0.2);
}

.foursys-yt-settings__card--pwa .foursys-yt-settings__card-icon {
	margin-bottom: 0;
	width: 52px;
	height: 52px;
}

.foursys-yt-settings__card--pwa .foursys-yt-settings__card-title {
	margin-bottom: 4px;
}

.foursys-yt-settings__card--pwa .foursys-yt-settings__card-desc {
	margin-bottom: 0;
}

/* Update v2.7.2: PWA-Info-Wrapper — nimmt verfügbaren Platz */
.foursys-yt-settings__pwa-info {
	flex: 1;
	min-width: 0;
}

.foursys-yt-settings__card--pwa .foursys-yt-btn--primary {
	flex-shrink: 0;
	white-space: nowrap;
}

.foursys-yt-pwa-status {
	flex-shrink: 0;
	font-size: 13px;
}

.foursys-yt-settings__card-hint {
	color: var(--foursys-text-secondary, #aaa);
	font-size: 13px;
	line-height: 1.4;
}

/* Legacy-Kompatibilität */
.foursys-yt-settings__content {
	max-width: 640px;
}

.foursys-yt-settings__hint {
	color: var(--foursys-text-secondary);
	font-size: 13px;
	margin: 0 0 16px;
	line-height: 1.5;
}

.foursys-yt-settings__field {
	margin-bottom: 16px;
}

.foursys-yt-settings__field label {
	display: block;
	font-size: 13px;
	color: #cccccc;
	margin-bottom: 6px;
	font-weight: 500;
}

.foursys-yt-settings__input-group {
	display: flex;
	gap: 8px;
	align-items: center;
}

.foursys-yt-settings__input-group input,
.foursys-yt-settings__input-group select {
	background-color: var(--foursys-bg-card);
	color: var(--foursys-text-primary);
	border: 1px solid var(--foursys-border);
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 14px;
	flex: 1;
	outline: none;
	transition: all 0.2s ease;
}

.foursys-yt-settings__input-group input:focus,
.foursys-yt-settings__input-group select:focus {
	border-color: var(--foursys-accent);
	color: var(--foursys-text-primary);
}

.foursys-yt-settings__status {
	margin-top: 8px;
	font-size: 13px;
}

.foursys-yt-settings__status--ok {
	color: #4ade80;
}

.foursys-yt-settings__status--error {
	color: var(--foursys-accent);
}

.foursys-yt-settings__status--loading {
	color: var(--foursys-text-secondary);
}

.foursys-yt-settings__connection {
	display: flex;
	align-items: center;
	gap: 8px;
}

.foursys-yt-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.foursys-yt-status__dot--connected {
	background-color: #4ade80;
}

.foursys-yt-status__dot--disconnected {
	background-color: var(--foursys-text-muted);
}

/* ============================================================================
   Audio Player / TTS
   ============================================================================ */

.foursys-yt-audio {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.foursys-yt-audio__progress-bar {
	height: 6px;
	background-color: var(--foursys-border);
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
}

.foursys-yt-audio__progress {
	height: 100%;
	background-color: var(--foursys-accent);
	border-radius: 3px;
	transition: width 0.1s linear;
}

.foursys-yt-audio__time {
	display: flex;
	gap: 4px;
	font-size: 12px;
	color: var(--foursys-text-secondary);
}

.foursys-yt-audio__current {
	min-width: 30px;
}

.foursys-yt-audio__duration {
	min-width: 30px;
}

.foursys-yt-tts-controls {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ============================================================================
   Toast Notification
   ============================================================================ */

.foursys-yt-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background-color: #333333;
	color: var(--foursys-text-primary);
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 10000;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
	white-space: nowrap;
}

.foursys-yt-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

/* Tablets: 1200px and below */
@media (max-width: 1200px) {
	.foursys-yt-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* Update v2.3.2: Shorts-Grid gleich wie Home-Grid */
	.foursys-yt-grid--shorts {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.foursys-yt-detail__content {
		grid-template-columns: 1fr 300px;
		gap: 20px;
	}

	.foursys-yt-detail__sidebar-thumb {
		width: 140px;
	}
}

/* Small tablets: 992px and below */
@media (max-width: 992px) {
	:root {
		--foursys-sidebar-width: 60px;
	}

	.foursys-yt-sidebar {
		width: var(--foursys-sidebar-width);
		padding: 24px 8px;
	}

	.foursys-yt-sidebar__header {
		margin-bottom: 24px;
		text-align: center;
	}

	.foursys-yt-sidebar__title,
	.foursys-yt-sidebar__badge,
	.foursys-yt-sidebar__badge-sub {
		display: none;
	}

	/* Update v1.8.3: Tablet-Sidebar Items zurücksetzen */
	.foursys-yt-sidebar__item {
		padding: 12px 8px;
		justify-content: center;
		gap: 0;
		margin-left: 0;
		width: 100%;
		border-left: none;
	}

	.foursys-yt-sidebar__item--active {
		border-left: 3px solid var(--foursys-accent);
		padding-left: 5px;
		margin-left: -8px;
		width: calc(100% + 8px);
	}

	.foursys-yt-sidebar__refresh {
		padding: 12px 8px;
		justify-content: center;
		gap: 0;
	}

	.foursys-yt-sidebar__user {
		flex-direction: column;
		gap: 8px;
		justify-content: center;
	}

	.foursys-yt-sidebar__user-info {
		display: none;
	}

	.foursys-yt-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 0 24px 24px;
	}

	/* Update v2.3.2: Shorts-Grid gleich wie Home-Grid */
	.foursys-yt-grid--shorts {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Update v1.8.2: Topbar bei schmaler Sidebar */
	.foursys-yt-topbar {
		padding: 0 24px;
	}

	.foursys-yt-topbar__title {
		font-size: 14px;
		letter-spacing: 1px;
	}

	.foursys-yt-topbar__search {
		flex: 1;
		max-width: none;
	}

	.foursys-yt-content-header {
		padding: 0 24px;
	}

	.foursys-yt-detail {
		padding: 0 24px;
	}

	.foursys-yt-detail__content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.foursys-yt-detail__content--short {
		grid-template-columns: 1fr;
	}

	/* Update v2.1.1: Sidebar bei 992px — Karten vertikal wie im Grid */
	.foursys-yt-detail__sidebar-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.foursys-yt-detail__sidebar-item {
		flex-direction: column;
		gap: 0;
	}

	.foursys-yt-detail__sidebar-thumb {
		width: 100%;
	}

	.foursys-yt-detail__sidebar-info {
		padding-top: 8px;
	}

	.foursys-yt-settings {
		padding: 0 24px;
	}
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
	:root {
		--foursys-topbar-height: auto;
		--foursys-sidebar-width: 0px;
	}

	.foursys-yt-wrapper {
		flex-direction: column;
	}

	/* Update v2.5.2: Topbar auflösen — Kinder werden direkte Wrapper-Kinder für sticky */
	.foursys-yt-topbar {
		display: contents;
	}

	/* Update v2.5.2: Titel-Zeile — scrollt normal weg */
	.foursys-yt-topbar__title-row {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 12px 16px 8px;
		background-color: var(--foursys-bg-secondary);
	}

	.foursys-yt-topbar__title {
		width: 100%;
		font-size: 14px;
	}

	/* Update v2.5.2: Search-Zeile — bleibt beim Scrollen oben fixiert */
	.foursys-yt-topbar__search-row {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 8px 16px 12px;
		gap: 12px;
		background-color: var(--foursys-bg-secondary);
		position: sticky;
		top: 0;
		z-index: 100;
		border-bottom: 1px solid var(--foursys-border);
	}

	.foursys-yt-topbar__search {
		flex: 1;
		max-width: none;
	}

	/* Update v1.9.0: Mobile — nur YouTube-Logo, kein Text */
	.foursys-yt-topbar__youtube-btn {
		margin-left: 0;
		padding: 10px;
		border-radius: 50%;
		gap: 0;
	}

	.foursys-yt-topbar__youtube-btn span {
		display: none;
	}

	.foursys-yt-body {
		padding-top: 0;
	}

	/* Update v1.9.0: Hamburger sichtbar auf Mobile */
	.foursys-yt-hamburger {
		display: flex;
	}

	/* Update v1.9.0: Sidebar Slide-in von links — Desktop-Layout beibehalten */
	.foursys-yt-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		padding: 24px 16px;
		z-index: 999;
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.foursys-yt-sidebar.foursys-yt-sidebar--mobile-visible {
		transform: translateX(0);
	}

	/* Update v1.9.0: Tablet-Overrides zurücksetzen → Desktop-Layout */
	.foursys-yt-sidebar__header {
		margin-bottom: 36px;
		text-align: left;
	}

	.foursys-yt-sidebar__title {
		display: block;
	}

	.foursys-yt-sidebar__badge,
	.foursys-yt-sidebar__badge-sub {
		display: block;
	}

	.foursys-yt-sidebar__item {
		padding: 14px 16px;
		justify-content: flex-start;
		gap: 14px;
		margin-left: -16px;
		width: calc(100% + 16px);
		padding-left: 29px;
		border-left: 3px solid transparent;
	}

	.foursys-yt-sidebar__item--active {
		border-left: 3px solid var(--foursys-accent);
		padding-left: 29px;
		margin-left: -16px;
		width: calc(100% + 16px);
	}

	.foursys-yt-sidebar__item span {
		display: inline;
	}

	.foursys-yt-sidebar__refresh {
		padding: 14px 16px;
		justify-content: flex-start;
		gap: 14px;
	}

	.foursys-yt-sidebar__user {
		flex-direction: row;
		gap: 12px;
		justify-content: flex-start;
	}

	.foursys-yt-sidebar__user-info {
		display: block;
	}

	.foursys-yt-main {
		margin-left: 0;
	}

	.foursys-yt-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 0 16px 16px;
	}

	/* Update v2.3.2: Shorts-Grid gleich wie Home-Grid */
	.foursys-yt-grid--shorts {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.foursys-yt-content-header {
		padding: 0 16px;
		flex-direction: column;
	}

	.foursys-yt-content-header__title {
		font-size: 22px;
	}

	.foursys-yt-content-header__view-all {
		align-self: flex-start;
	}

	.foursys-yt-detail {
		padding: 0 16px;
	}

	.foursys-yt-detail__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.foursys-yt-detail__fullscreen {
		position: absolute;
		top: 16px;
		right: 16px;
	}

	.foursys-yt-detail__content {
		grid-template-columns: 1fr;
	}

	/* Update v2.1.1: Sidebar bei 768px — 2-Spalten-Grid, vertikale Karten */
	.foursys-yt-detail__sidebar-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.foursys-yt-detail__sidebar-item {
		flex-direction: column;
		gap: 0;
	}

	.foursys-yt-detail__sidebar-thumb {
		width: 100%;
	}

	.foursys-yt-detail__sidebar-info {
		padding-top: 8px;
	}

	.foursys-yt-settings {
		padding: 0 16px;
	}

	.foursys-yt-channel-filter {
		padding: 0 16px 16px;
	}

	.foursys-yt-select {
		max-width: none;
	}

	/* Update v1.9.3: Mobile — Button oben links, aber unter der Topbar */
	.foursys-yt-shorts-feed__back {
		top: 80px;
		left: 12px;
		transform: none;
		padding: 8px 12px;
	}

	.foursys-yt-shorts-feed__nav {
		right: 16px;
	}
}

/* Small mobile: 576px and below */
@media (max-width: 576px) {
	.foursys-yt-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Update v2.3.2: Shorts-Grid gleich wie Home-Grid */
	.foursys-yt-grid--shorts {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.foursys-yt-card__title {
		font-size: 13px;
	}

	.foursys-yt-card__channel {
		font-size: 12px;
	}

	.foursys-yt-card__meta {
		font-size: 11px;
	}

	.foursys-yt-content-header__title {
		font-size: 18px;
	}

	.foursys-yt-detail__title {
		font-size: 18px;
	}

	/* Update v2.1.1: Sidebar bei 576px — 1 Spalte, vertikale Karten */
	.foursys-yt-detail__sidebar-list {
		grid-template-columns: 1fr;
	}

	.foursys-yt-detail__sidebar-item {
		flex-direction: column;
		gap: 0;
	}

	.foursys-yt-detail__sidebar-thumb {
		width: 100%;
	}

	.foursys-yt-detail__player {
		aspect-ratio: 16 / 9;
	}

	.foursys-yt-settings__section {
		margin-bottom: 24px;
		padding-bottom: 24px;
	}

	/* Update v2.7.2: Settings-Grid 1-spaltig auf Mobile */
	.foursys-yt-settings__grid {
		grid-template-columns: 1fr;
	}

	.foursys-yt-settings__card--pwa {
		flex-direction: column;
		text-align: center;
	}

	.foursys-yt-settings__card--pwa .foursys-yt-settings__pwa-info {
		min-width: unset;
	}

	.foursys-yt-settings__card--pwa .foursys-yt-btn--primary {
		width: 100%;
	}

	.foursys-yt-shorts-feed__player {
		max-width: 100%;
	}

	.foursys-yt-shorts-feed__info {
		max-width: 100%;
	}

	.foursys-yt-shorts-feed__title {
		font-size: 14px;
	}

	.foursys-yt-shorts-feed__meta {
		font-size: 12px;
	}

	.foursys-yt-detail__sidebar-item-title {
		font-size: 12px;
	}

	.foursys-yt-detail__sidebar-channel {
		font-size: 11px;
	}
}

/* Ultra-small: 375px and below */
@media (max-width: 375px) {
	/* Update v2.5.2: Padding auf die einzelnen Zeilen statt auf aufgelösten Topbar */
	.foursys-yt-topbar__title-row {
		padding: 10px 12px 6px;
	}

	.foursys-yt-topbar__search-row {
		padding: 6px 12px 10px;
	}

	.foursys-yt-content-header {
		padding: 0 12px;
	}

	.foursys-yt-content-header__title {
		font-size: 16px;
	}

	.foursys-yt-grid {
		padding: 0 12px 12px;
		gap: 10px;
	}

	.foursys-yt-detail {
		padding: 0 12px;
	}

	.foursys-yt-card__title {
		font-size: 12px;
	}

	.foursys-yt-detail__title {
		font-size: 16px;
	}

	.foursys-yt-detail__player {
		aspect-ratio: 16 / 9;
	}

	.foursys-yt-settings {
		padding: 0 12px;
	}

	.foursys-yt-channel-filter {
		padding: 0 12px 12px;
	}

	/* Update v1.8.5: Suchfeld Responsive — einheitliche Rundung */
	.foursys-yt-topbar__search {
		border-radius: 7px;
		padding: 0 12px;
	}

	.foursys-yt-topbar__youtube-btn {
		padding: 8px 16px;
		font-size: 12px;
	}
}

/* ============================================================================
   Update v2.0.2: Subscriptions-Tab — Kanal-Karten
   ============================================================================ */

/* Header: Dropdown + Favoriten-Button */
.foursys-yt-subs-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 32px 20px;
	flex-wrap: wrap;
}

.foursys-yt-subs-header .foursys-yt-select {
	flex: 1;
	min-width: 200px;
}

.foursys-yt-subs-fav-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background-color: var(--foursys-bg-card);
	color: var(--foursys-text-secondary);
	border: 1px solid var(--foursys-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.foursys-yt-subs-fav-btn:hover {
	background-color: var(--foursys-hover-bg);
	color: var(--foursys-text-primary);
	border-color: var(--foursys-text-muted);
}

.foursys-yt-subs-fav-btn--active {
	background-color: rgba(255, 180, 0, 0.12);
	color: #FFB400;
	border-color: rgba(255, 180, 0, 0.3);
}

.foursys-yt-subs-fav-btn--active:hover {
	background-color: rgba(255, 180, 0, 0.2);
	color: #FFB400;
}

.foursys-yt-subs-fav-btn svg {
	flex-shrink: 0;
}

.foursys-yt-subs-fav-btn--active svg {
	fill: #FFB400;
	stroke: #FFB400;
}

/* Kanal-Karten-Grid */
.foursys-yt-subs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	padding: 0 32px 32px;
}

/* Einzelne Kanal-Karte */
.foursys-yt-sub-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 16px 20px;
	background-color: var(--foursys-bg-card);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	text-align: center;
}

.foursys-yt-sub-card:hover {
	background-color: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
}

/* Kanal-Bild (rund) */
.foursys-yt-sub-card__thumb-wrap {
	width: 80px;
	height: 80px;
	margin-bottom: 12px;
	flex-shrink: 0;
	border-radius: 50% !important;
	overflow: hidden !important;
}

/* Update v2.2.4: border-radius mit !important gegen Theme-Overrides */
.foursys-yt-sub-card__thumb {
	width: 80px;
	height: 80px;
	border-radius: 50% !important;
	object-fit: cover;
}

.foursys-yt-sub-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--foursys-border);
	color: var(--foursys-text-primary);
	font-size: 28px;
	font-weight: 600;
	border-radius: 50% !important;
}

/* Kanal-Info */
.foursys-yt-sub-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	width: 100%;
}

.foursys-yt-sub-card__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--foursys-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.foursys-yt-sub-card__subs {
	font-size: 12px;
	color: var(--foursys-text-secondary);
}

/* Favoriten-Stern */
.foursys-yt-sub-card__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--foursys-text-muted);
	padding: 6px;
	border-radius: 50%;
	transition: all 0.2s ease;
	line-height: 0;
}

.foursys-yt-sub-card__fav:hover {
	color: #FFB400;
	background-color: rgba(255, 180, 0, 0.1);
}

.foursys-yt-sub-card__fav--active {
	color: #FFB400;
}

.foursys-yt-sub-card__fav--active svg {
	fill: #FFB400;
	stroke: #FFB400;
}

/* Leerzustand */
.foursys-yt-subs-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	color: var(--foursys-text-muted);
	text-align: center;
	gap: 12px;
}

.foursys-yt-subs-empty p {
	margin: 0;
	font-size: 14px;
}

/* Zurück-Button */
.foursys-yt-subs-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 32px 16px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--foursys-border);
	border-radius: 8px;
	color: var(--foursys-text-secondary);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.foursys-yt-subs-back:hover {
	color: var(--foursys-text-primary);
	border-color: var(--foursys-text-muted);
}

/* Sentinel für Infinite Scroll */
.foursys-yt-subs-sentinel {
	height: 1px;
	grid-column: 1 / -1;
}

/* ============================================================================
   Update v2.0.2: Runde Kanalbilder überall
   ============================================================================ */

/* Video-Karten-Avatar (bereits rund, hier zur Sicherheit) */
.foursys-yt-card__avatar {
	border-radius: 50% !important;
}

/* Detail-Seite Kanal-Avatar */
.foursys-yt-detail__channel-avatar {
	border-radius: 50% !important;
}

/* ============================================================================
   Update v2.0.2: Responsive Anpassungen für Subscriptions-Tab
   ============================================================================ */

/* Update v2.3.6: Mobile Abos — 2 Karten nebeneinander auf allen mobilen Geräten */
@media (max-width: 768px) {
	.foursys-yt-subs-header {
		padding: 0 12px 12px;
	}

	.foursys-yt-subs-grid {
		grid-template-columns: repeat(2, 1fr); /* Update v2.3.6: Immer 2 Spalten auf Mobile */
		gap: 10px;
		padding: 0 12px 16px;
	}

	.foursys-yt-sub-card {
		padding: 16px 8px 14px;
		min-width: 0; /* Update v2.3.6: Verhindert Overflow */
	}

	.foursys-yt-sub-card__thumb-wrap,
	.foursys-yt-sub-card__thumb {
		width: 60px;
		height: 60px;
	}

	.foursys-yt-sub-card__name {
		font-size: 13px;
	}

	.foursys-yt-sub-card__subs {
		font-size: 11px;
	}

	.foursys-yt-sub-card__fav {
		top: 6px;
		right: 6px;
		padding: 4px;
	}

	.foursys-yt-sub-card__fav svg {
		width: 14px;
		height: 14px;
	}

	.foursys-yt-subs-back {
		margin: 0 12px 12px;
	}

	.foursys-yt-subs-fav-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}

@media (max-width: 400px) {
	/* Update v2.3.6: Extra kleine Geräte — noch kompakter */
	.foursys-yt-subs-grid {
		gap: 8px;
		padding: 0 10px 12px;
	}

	.foursys-yt-sub-card {
		padding: 14px 6px 12px;
	}

	.foursys-yt-sub-card__thumb-wrap,
	.foursys-yt-sub-card__thumb {
		width: 52px;
		height: 52px;
	}

	.foursys-yt-sub-card__thumb--placeholder {
		font-size: 22px;
	}
}

/* Print styles */
@media print {
	.foursys-yt-sidebar,
	.foursys-yt-topbar,
	.foursys-yt-detail__fullscreen {
		display: none !important;
	}

	.foursys-yt-wrapper {
		min-height: auto;
	}

	.foursys-yt-main {
		flex: auto;
	}
}

/* =====================================================
 * Update v2.1.5: VORSCHLÄGE-TAB — Topic-Chips
 * ===================================================== */

.foursys-yt-suggestions-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 32px 20px; /* Update v2.2.0: Seitliches Padding wie Grid (32px) */
	margin: 0;
}

.foursys-yt-topic-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.06);
	color: #aaa;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.foursys-yt-topic-chip:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
}

.foursys-yt-topic-chip--active {
	background: #FF5540;
	color: #fff;
	border-color: #FF5540;
}

.foursys-yt-topic-chip--active:hover {
	background: #e64d39;
	border-color: #e64d39;
}

/* Responsive: Topic-Chips horizontal scrollbar auf Mobile */
@media (max-width: 768px) {
	.foursys-yt-suggestions-topics {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 16px 16px; /* Update v2.2.0: Seitliches Padding wie Grid auf Mobile */
	}
	.foursys-yt-suggestions-topics::-webkit-scrollbar {
		display: none;
	}
}

/* =====================================================
   Update v2.2.6: PLAYLISTS-TAB — Karten + Detail
   Update v2.2.8: YouTube-Kartendesign, #2A2A2A, Spacing, Überschrift
   ===================================================== */

/* Update v2.2.8: Überschrift über dem Playlist-Grid */
/* Update v2.2.9: 40px Außenabstand wie bei allen anderen Übersichten */
.foursys-yt-playlists-heading {
	font-size: 20px;
	font-weight: 600;
	color: var(--foursys-text-primary, #E8E8E8);
	margin: 0 0 16px;
	padding: 8px 40px 0;
	line-height: 1.3;
}

/* Playlist-Karten Grid (Ebene 1: Übersicht) */
/* Update v2.2.9: 40px Außenabstand wie beim Standard-Grid */
.foursys-yt-playlists-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	padding: 0 40px 32px;
}

/* Update v2.2.8: Kartenhintergrund #2A2A2A, YouTube-ähnliches Design */
.foursys-yt-playlist-card {
	background: #2A2A2A;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.foursys-yt-playlist-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Thumbnail-Bereich mit Overlay */
.foursys-yt-playlist-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #383838;
	overflow: hidden;
}

.foursys-yt-playlist-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.foursys-yt-playlist-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2A2A2A 0%, #383838 100%);
}

/* Update v2.2.8: Overlay unten statt rechts (YouTube-Stil) */
.foursys-yt-playlist-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 32px;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	backdrop-filter: blur(4px);
}

.foursys-yt-playlist-card__overlay svg {
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

/* Info-Bereich unter Thumbnail */
.foursys-yt-playlist-card__info {
	padding: 10px 12px;
}

.foursys-yt-playlist-card__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--foursys-text-primary, #E8E8E8);
	margin: 0 0 4px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.foursys-yt-playlist-card__count {
	font-size: 12px;
	color: var(--foursys-text-secondary, #AAAAAA);
}

/* Playlist-Detail (Ebene 2: Zurück-Button + Videos) */
/* Update v2.2.9: Zurück-Button auf 32px links — in Flucht mit Video-Grid */
.foursys-yt-back-to-playlists {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	margin: 0 0 12px 32px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--foursys-text-secondary, #AAAAAA);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.foursys-yt-back-to-playlists:hover {
	color: var(--foursys-text-primary, #E8E8E8);
	background: var(--foursys-hover-bg, rgba(255, 255, 255, 0.05));
}

/* Update v2.2.9: Playlist-Titel in Flucht mit dem Video-Grid (32px wie .foursys-yt-grid) */
.foursys-yt-playlists-detail__header {
	padding: 0 32px 12px;
}

.foursys-yt-playlists-detail__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--foursys-text-primary, #E8E8E8);
	margin: 0;
	line-height: 1.3;
}

/* Update v2.2.9: Shorts im Playlist-Detail immer als 16:9 (nicht 9:16) */
#foursys-yt-grid-playlists .foursys-yt-card__thumb--short {
	aspect-ratio: 16 / 9 !important;
}

/* Update v2.3.0: Shorts im Playlist-Grid zeigen Info-Bereich (Kanalbild, Titel, Meta, 3-Punkte) */
#foursys-yt-grid-playlists .foursys-yt-card--short .foursys-yt-card__info {
	display: flex !important;
}

#foursys-yt-grid-playlists .foursys-yt-card--short .foursys-yt-card__thumb--short .foursys-yt-card__img {
	aspect-ratio: 16 / 9 !important;
}

/* Update v2.3.2: Shorts-Übersicht zeigt 16:9 Karten mit Info-Bereich (wie Home-Tab) */
#foursys-yt-grid-shorts .foursys-yt-card__thumb--short {
	aspect-ratio: 16 / 9 !important;
}

#foursys-yt-grid-shorts .foursys-yt-card--short .foursys-yt-card__info {
	display: flex !important;
}

#foursys-yt-grid-shorts .foursys-yt-card--short .foursys-yt-card__thumb--short .foursys-yt-card__img {
	aspect-ratio: 16 / 9 !important;
}

/* Responsive: Playlist-Grid auf Mobile */
@media (max-width: 768px) {
	.foursys-yt-playlists-heading {
		padding: 8px 16px 0;
	}

	.foursys-yt-playlists-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px;
		padding: 0 16px;
	}

	.foursys-yt-playlist-card__title {
		font-size: 13px;
	}

	.foursys-yt-back-to-playlists {
		margin-left: 16px;
	}

	.foursys-yt-playlists-detail__header {
		padding: 0 16px 12px;
	}
}

/* =====================================================
 * Update v2.3.3: MOBILE DETAIL — Sticky-Video, Fortschrittsbalken, Zurück-Button
 * ===================================================== */

/* Roter Fortschrittsbalken unter dem Video (alle Geräte) */
.foursys-yt-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.2);
	z-index: 30;
	pointer-events: none;
}

.foursys-yt-progress-bar__fill {
	height: 100%;
	background: #FF0000;
	width: 0%;
	transition: width 0.3s linear;
}

/* Update v2.3.3: Mobile Detail-Ansicht — Video sticky, full-width, kein Zurück-Button (außer iPhone) */
/* Update v2.3.4: Fix — kein Abstand über Video + Sticky über gesamte Seite */
@media (max-width: 768px) {

	/* Zurück-Button auf Smartphones ausblenden (außer iPhone — per JS gesteuert via Klasse) */
	.foursys-yt-detail__header {
		display: none !important;
	}

	/* iPhone: Zurück-Button wieder einblenden */
	.foursys-yt-mobile-iphone .foursys-yt-detail__header {
		display: flex !important;
		padding: 8px 16px 0;
	}

	/* Update v2.3.4: Wrapper-Padding entfernen wenn Detail sichtbar ist */
	.foursys-yt-mobile-detail-active.foursys-yt-main {
		padding-top: 0 !important;
	}

	/* Detail-Container: kein Padding für Video */
	.foursys-yt-detail {
		padding: 0 !important;
	}

	/* Update v2.3.4: Player wird per JS als direktes Kind von #foursys-yt-detail verschoben.
	   Dadurch ist der Sticky-Kontext der gesamte Detail-Container (inkl. Sidebar). */
	.foursys-yt-detail__player {
		position: sticky;
		top: 0;
		z-index: 100;
		border-radius: 0;
		width: 100vw;
		margin-left: 0;
	}

	/* Inhalte unter dem Video behalten ihre Abstände */
	.foursys-yt-detail__info {
		padding: 12px 16px 0;
	}

	.foursys-yt-detail__description {
		padding: 0 16px;
	}

	.foursys-yt-detail__ai {
		padding: 0 16px;
	}

	.foursys-yt-detail__summary {
		padding: 0 16px;
	}

	.foursys-yt-detail__audio-player {
		padding: 0 16px;
	}

	.foursys-yt-detail__sidebar {
		padding: 0 16px;
	}

	/* Fortschrittsbalken im Sticky-Modus */
	.foursys-yt-progress-bar {
		height: 3px;
	}
}

/* ============================================================================
   Update v2.5.6: Login/Registrierungs-Formular
   ============================================================================ */

/* Update v2.6.7: margin-bottom reduziert, damit Footer-Menü eng am Panel sitzt */
.foursys-yt-auth {
	max-width: 420px;
	margin: 80px auto 12px;
	background: var(--foursys-bg-card, #242424);
	border-radius: 16px;
	padding: 40px 36px 36px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Update v2.6.6: Logo immer linksbündig */
.foursys-yt-auth__brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-bottom: 32px;
}

.foursys-yt-auth__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--foursys-text-primary, #fff);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.foursys-yt-auth__tabs {
	display: flex;
	border-bottom: 1px solid var(--foursys-border, #333);
	margin-bottom: 24px;
	gap: 0;
}

.foursys-yt-auth__tab {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--foursys-text-muted, #666);
	font-size: 15px;
	font-weight: 600;
	padding: 10px 0;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.foursys-yt-auth__tab:hover {
	color: var(--foursys-text-secondary, #999);
}

.foursys-yt-auth__tab--active {
	color: var(--foursys-text-primary, #fff);
	border-bottom-color: var(--foursys-accent, #DB3C2A);
}

/* Update v2.5.6: Nachrichten-Box (Fehler/Erfolg) */
.foursys-yt-auth__message {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.4;
}

.foursys-yt-auth__message--error {
	background: rgba(219, 60, 42, 0.15);
	color: #ff6b5a;
	border: 1px solid rgba(219, 60, 42, 0.3);
}

.foursys-yt-auth__message--success {
	background: rgba(46, 160, 67, 0.15);
	color: #3fb950;
	border: 1px solid rgba(46, 160, 67, 0.3);
}

/* Update v2.5.6: Formularfelder */
.foursys-yt-auth__field {
	margin-bottom: 18px;
}

.foursys-yt-auth__field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--foursys-text-secondary, #999);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.foursys-yt-auth__field input[type="text"],
.foursys-yt-auth__field input[type="email"],
.foursys-yt-auth__field input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--foursys-bg-primary, #1a1a1a);
	border: 1px solid var(--foursys-border, #333);
	border-radius: 8px;
	color: var(--foursys-text-primary, #fff);
	font-size: 15px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.foursys-yt-auth__field input:focus {
	border-color: var(--foursys-accent, #DB3C2A);
}

.foursys-yt-auth__hint {
	display: block;
	font-size: 12px;
	color: var(--foursys-text-muted, #666);
	margin-top: 4px;
}

/* Update v2.5.6: Aktions-Zeile */
.foursys-yt-auth__actions {
	margin-bottom: 20px;
}

.foursys-yt-auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--foursys-text-secondary, #999);
	cursor: pointer;
}

.foursys-yt-auth__remember input[type="checkbox"] {
	accent-color: var(--foursys-accent, #DB3C2A);
	width: 16px;
	height: 16px;
}

/* Update v2.5.6: Submit-Button */
.foursys-yt-auth__submit {
	width: 100%;
	padding: 14px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s, opacity 0.2s;
}

.foursys-yt-auth__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Update v2.5.6: Link (Passwort vergessen) */
.foursys-yt-auth__link {
	display: block;
	text-align: center;
	margin-top: 16px;
	color: var(--foursys-text-muted, #666);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s;
}

.foursys-yt-auth__link:hover {
	color: var(--foursys-accent, #DB3C2A);
	text-decoration: none;
}

/* Update v2.7.1: Info-Text im Passwort-Vergessen-Formular */
.foursys-yt-auth__info {
	color: var(--foursys-text-muted, #999);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 20px;
	text-align: center;
}

/* Update v2.6.3: Logo im Login-Formular */
.foursys-yt-auth__logo-link {
	display: inline-block;
	line-height: 0;
}

/* Update v2.6.4: max-height als Fallback, Inline-Style für Breite hat Vorrang */
.foursys-yt-auth__logo {
	max-height: 50px;
	max-width: 100%;
	display: block;
	object-fit: contain;
}

/* Update v2.6.3: Horizontales Menü unter dem Login-Formular */
/* Update v2.6.7: margin-top reduziert — Menü direkt unter dem Panel */
.foursys-yt-auth-footer-nav {
	margin-top: 0;
	text-align: center;
}

.foursys-yt-auth-footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.foursys-yt-auth-footer-nav__list li {
	display: flex;
	align-items: center;
}

.foursys-yt-auth-footer-nav__list li + li::before {
	content: '|';
	color: var(--foursys-text-muted, #666);
	margin: 0 12px;
	font-size: 13px;
}

.foursys-yt-auth-footer-nav__list li a {
	color: var(--foursys-text-muted, #666);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s;
}

.foursys-yt-auth-footer-nav__list li a:hover {
	color: var(--foursys-accent, #DB3C2A);
	text-decoration: none;
}

/* Update v2.5.6: Mobile Anpassungen */
@media (max-width: 480px) {
	/* Update v2.6.7: margin-bottom auch auf Mobile reduziert */
	.foursys-yt-auth {
		margin: 40px 16px 12px;
		padding: 28px 20px 24px;
		border-radius: 12px;
	}

	.foursys-yt-auth__title {
		font-size: 15px;
	}

	/* Update v2.6.3: Menü auf Mobile kompakter */
	.foursys-yt-auth-footer-nav__list li + li::before {
		margin: 0 8px;
	}

	.foursys-yt-auth-footer-nav__list li a {
		font-size: 12px;
	}
}

/* ============================================================================
   Update v2.6.8: Karten-Seiten-Template
   ============================================================================ */

/* Karte: gleiche Optik wie Login, aber mit scrollbarem Inhalt */
.foursys-yt-card-page__card {
	margin: 60px auto 12px !important;
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
}

/* Scrollbarer Inhaltsbereich */
.foursys-yt-card-page__content {
	flex: 1;
	overflow-y: auto;
	padding-top: 8px;
	color: var(--foursys-text-secondary, #999);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

/* Slim Scrollbar für Inhaltsbereich */
.foursys-yt-card-page__content::-webkit-scrollbar {
	width: 4px;
}

.foursys-yt-card-page__content::-webkit-scrollbar-track {
	background: transparent;
}

.foursys-yt-card-page__content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}

.foursys-yt-card-page__content::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Firefox Slim Scrollbar */
.foursys-yt-card-page__content {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Typografie im Inhaltsbereich */
.foursys-yt-card-page__content h1,
.foursys-yt-card-page__content h2,
.foursys-yt-card-page__content h3,
.foursys-yt-card-page__content h4 {
	color: var(--foursys-text-primary, #e8e8e8);
	font-weight: 600;
	margin: 16px 0 8px;
}

.foursys-yt-card-page__content h1 { font-size: 20px; }
.foursys-yt-card-page__content h2 { font-size: 17px; }
.foursys-yt-card-page__content h3 { font-size: 15px; }

.foursys-yt-card-page__content p {
	margin: 0 0 12px;
}

.foursys-yt-card-page__content a {
	color: var(--foursys-accent, #DB3C2A);
	text-decoration: none;
}

.foursys-yt-card-page__content a:hover {
	text-decoration: underline;
}

.foursys-yt-card-page__content ul,
.foursys-yt-card-page__content ol {
	padding-left: 20px;
	margin: 0 0 12px;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
	.foursys-yt-card-page__card {
		margin: 20px 16px 12px !important;
		max-height: calc(100vh - 80px);
	}

	.foursys-yt-card-page__content {
		font-size: 13px;
	}
}

/* ============================================================================
   Update v2.6.9: Canvas-Template — Elementor-Canvas-Ersatz
   ============================================================================ */

/* Canvas-Body: Kein Margin, kein Padding, kein Theme-Chrome */
body.foursys-yt-canvas {
	margin: 0;
	padding: 0;
	background: var(--foursys-bg, #0F0F0F);
}

/* Update v2.7.0: Nur Theme-Elemente ausblenden, Plugin-Elemente (.foursys-yt-*) behalten */
body.foursys-yt-canvas header:not(.foursys-yt-topbar),
body.foursys-yt-canvas footer:not(.foursys-yt-auth-footer-nav),
body.foursys-yt-canvas nav:not([class*="foursys-yt-"]),
body.foursys-yt-canvas aside:not(.foursys-yt-sidebar) {
	display: none !important;
}

/* ============================================================================
   Update v2.5.7: Usermenü-Dropdown
   ============================================================================ */

/* Update v2.5.7: User-Trigger klickbar machen */
#foursys-yt-user-trigger {
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s;
	border-radius: 8px;
	padding: 8px;
	margin: -8px;
	margin-top: 8px;
}

#foursys-yt-user-trigger:hover {
	background-color: var(--foursys-hover-bg, rgba(255, 255, 255, 0.05));
}

.foursys-yt-sidebar__user-chevron {
	color: var(--foursys-text-muted, #666);
	flex-shrink: 0;
	transition: transform 0.2s;
}

.foursys-yt-sidebar__user-chevron--open {
	transform: rotate(180deg);
}

/* Update v2.5.7: Dropdown-Panel — breit, ragt über Sidebar hinaus */
.foursys-yt-usermenu {
	position: fixed;
	bottom: 72px;
	left: 16px;
	width: 360px;
	background: var(--foursys-bg-card, #242424);
	border: 1px solid var(--foursys-border, #333);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	z-index: 1001;
	padding: 20px;
	max-height: 70vh;
	overflow-y: auto;
}

/* Update v2.5.7: Avatar-Bereich im Menü */
.foursys-yt-usermenu__avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.foursys-yt-usermenu__avatar-wrap {
	position: relative;
	width: 72px;
	height: 72px;
}

.foursys-yt-usermenu__avatar-img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.foursys-yt-usermenu__avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s;
	cursor: pointer;
	color: #fff;
}

.foursys-yt-usermenu__avatar-wrap:hover .foursys-yt-usermenu__avatar-overlay {
	opacity: 1;
}

.foursys-yt-usermenu__avatar-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--foursys-text-primary, #fff);
}

.foursys-yt-usermenu__avatar-email {
	font-size: 12px;
	color: var(--foursys-text-muted, #666);
}

/* Update v2.5.7: Trennlinie */
.foursys-yt-usermenu__divider {
	height: 1px;
	background: var(--foursys-border, #333);
	margin: 12px 0;
}

/* Update v2.5.7: Toggle-Buttons (E-Mail, Passwort) */
.foursys-yt-usermenu__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: none;
	padding: 10px 8px;
	color: var(--foursys-text-secondary, #999);
	font-size: 14px;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.2s, color 0.2s;
}

.foursys-yt-usermenu__toggle:hover {
	background-color: var(--foursys-hover-bg, rgba(255, 255, 255, 0.05));
	color: var(--foursys-text-primary, #fff);
}

/* Update v2.5.7: Inline-Formulare */
.foursys-yt-usermenu__form {
	padding: 12px 8px 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.foursys-yt-usermenu__form input[type="email"],
.foursys-yt-usermenu__form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	background: var(--foursys-bg-primary, #1a1a1a);
	border: 1px solid var(--foursys-border, #333);
	border-radius: 6px;
	color: var(--foursys-text-primary, #fff);
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.foursys-yt-usermenu__form input:focus {
	border-color: var(--foursys-accent, #DB3C2A);
}

.foursys-yt-usermenu__btn {
	padding: 10px !important;
	font-size: 13px !important;
	border-radius: 6px !important;
}

/* Update v2.5.7: Nachrichten im Menü */
.foursys-yt-usermenu__msg {
	font-size: 13px;
	line-height: 1.4;
	min-height: 0;
}

.foursys-yt-usermenu__msg--success {
	color: #3fb950;
}

.foursys-yt-usermenu__msg--error {
	color: #ff6b5a;
}

/* Update v2.5.7: Abmelden-Link */
.foursys-yt-usermenu__logout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	color: #ff6b5a;
	font-size: 14px;
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.foursys-yt-usermenu__logout:hover {
	background-color: rgba(255, 107, 90, 0.1);
	color: #ff6b5a;
	text-decoration: none;
}

/* Update v2.5.7: Mobile — Dropdown passt sich an */
@media (max-width: 768px) {
	.foursys-yt-usermenu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 16px 16px 0 0;
		max-height: 70vh;
		padding: 24px 20px;
	}
}

/* ============================================================================
   Update v2.5.8: Neue-Videos-Animation
   ============================================================================ */

/* Einblende-Animation für neue Videos (Polling) */
@keyframes foursys-yt-fadein {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.foursys-yt-card--new {
	animation: foursys-yt-fadein 0.4s ease-out both;
}

/* ==========================================================================
   Update v2.5.9: Verlauf-Tab (History) — YouTube-ähnliches Design
   ========================================================================== */

/* Header mit Titel und Löschen-Button */
.foursys-yt-history-header .foursys-yt-content-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

/* Gesamten Verlauf löschen-Button */
.foursys-yt-history__clear-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--foursys-border);
	border-radius: 8px;
	color: var(--foursys-text-secondary);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.foursys-yt-history__clear-btn:hover {
	color: #FF5540;
	border-color: #FF5540;
	background: rgba(255, 85, 64, 0.08);
}

.foursys-yt-history__clear-btn svg {
	flex-shrink: 0;
}

/* Datumsgruppen */
.foursys-yt-history-group {
	margin-bottom: 32px;
}

.foursys-yt-history-group__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--foursys-text-primary);
	margin: 0 0 16px 0;
	padding: 0 32px 8px; /* Update v2.6.1: Links bündig mit Grid-Karten */
	border-bottom: 1px solid var(--foursys-border);
}

/* Update v2.6.1: Shorts im Verlauf als 16:9 Karten (wie lange Videos) */
#foursys-yt-panel-history .foursys-yt-card--short .foursys-yt-card__thumb--short {
	aspect-ratio: 16 / 9 !important;
}

#foursys-yt-panel-history .foursys-yt-card--short .foursys-yt-card__thumb--short .foursys-yt-card__img {
	aspect-ratio: 16 / 9 !important;
}

#foursys-yt-panel-history .foursys-yt-card--short .foursys-yt-card__info {
	display: flex !important;
}

/* Entfernen-Button (X) auf Video-Karten im Verlauf */
.foursys-yt-history__remove-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
	z-index: 5;
	padding: 0;
}

.foursys-yt-card:hover .foursys-yt-history__remove-btn {
	opacity: 1;
}

.foursys-yt-history__remove-btn:hover {
	background: rgba(255, 85, 64, 0.9);
}

/* Cards im Verlauf — relativ positioniert für den Remove-Button */
#foursys-yt-panel-history .foursys-yt-card {
	position: relative;
}