@font-face {
	font-family:"Noto Color Emoji Fallback";font-style:normal;font-weight:400;src:url(/assets/fonts/NotoColorEmoji-flagsonly.woff2) format("woff2"),url(/assets/fonts/NotoColorEmoji-Regular.woff) format("woff"),url(/assets/fonts/NotoColorEmoji-Regular.ttf) format("truetype");unicode-range:U+1f1e6-1f1ff;font-display:swap
}

@font-face {
	font-family:Roboto;src:url(/assets/fonts/Roboto-Regular.woff2) format("woff2"),url(/assets/fonts/Roboto-Regular.woff) format("woff"),url(/assets/fonts/Roboto-Regular.ttf) format("truetype");font-weight:400;font-display:swap
}

@font-face {
	font-family:Roboto;src:url(/assets/fonts/Roboto-Medium.woff2) format("woff2"),url(/assets/fonts/Roboto-Medium.woff) format("woff"),url(/assets/fonts/Roboto-Medium.ttf) format("truetype");font-weight:500;font-display:swap
}

@font-face {
	font-family:Roboto;src:url(/assets/fonts/Roboto-Bold.woff2) format("woff2"),url(/assets/fonts/Roboto-Bold.woff) format("woff"),url(/assets/fonts/Roboto-Bold.ttf) format("truetype");font-weight:700;font-display:swap
}

@font-face {
	font-family:Twemoji Country Flags;src:url(/assets/fonts/TwemojiCountryFlags.woff2) format("woff2");font-display:swap
}

:root {
	--bottom-height: 65px;
	--global-header-height: 3.5rem;
	--navigation-drawer-width: 16rem;
	--sidebar-width: 21rem;
	--sidebar-entry-height-mobile: 3.5rem;
	--sidebar-entry-height-desktop: 4rem;
	--sidebar-header-height-mobile: 6rem;
	--sidebar-header-height-desktop: 5rem;
	--sidebar-header-border-radius: 20px;
	--primary-bg-color: #202124;
	--content-section-bg-color: #06080C;
	--nav-drawer-bg-color: #303134;
	--nav-drawer-item-hover-bg-color: #3c4043;
	--primary-border-color: #5f6368;
	--hover-highlight-bg-color: #36373A;
	--selected-item-bg-color: #64D2FF;
	--selected-item-text-color: #24242B;
	--selected-item-text-color-secondary: #2A586B;
	--highlight-text-color: var(--selected-item-bg-color);
	--secondary-text-color: #86888A;
	--hover-secondary-text-color: #B4B8C1;
	--highlight-red: #FF0000;
	--brand-accent-color: #79C447;
	--brand-accent-hover-color: #D2EBC1;
	--scrollbar-thumb-color: rgba(255, 255, 255, .2);
	--search-bar-bg: var(--hover-highlight-bg-color);
	--overlay-background: #000;
	--modal-content-color: #FFF;
	--destructive-button-color: #d32f2f;
	--destructive-button-hover-color: #e53935
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body,html {
	overflow: hidden;
	height: 100%
}

body {
	background-color: var(--primary-bg-color)
}

html body {
	font-family: Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif
}

button {
	all: unset;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	box-shadow: none;
	text-align: center;
	line-height: 1;
	box-sizing: border-box;
	cursor: pointer
}

@supports (-moz-appearance:none) {
	.custom-scroll {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb-color) transparent
	}
}

.custom-scroll::-webkit-scrollbar {
	height: 1rem;
	width: .5rem
}

.custom-scroll::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: 9999px
}

.custom-scroll::-webkit-scrollbar-track {
	background: transparent
}

.section-content {
	display: none;
	position: absolute;
	top: var(--global-header-height);
	width: 100%;
	height: calc(100% - var(--global-header-height));
	background-color: var(--content-section-bg-color);
	padding: 1rem;
	overflow-y: auto;
	z-index: 2000
}

.section-content.is-active {
	display: flex;
	justify-content: center
}

.global-header,.sidebar-header,.sidebar-items,.sidebar-search-container {
	background-color: var(--primary-bg-color)
}

.global-header {
	position: relative;
	z-index: 500;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: var(--global-header-height);
	padding: 0 1rem;
	border-bottom: 1px solid var(--primary-border-color)
}

.navigation-drawer {
	display: flex;
	overflow: auto;
	transition: transform .3s ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--navigation-drawer-width);
	height: calc(100% - var(--global-header-height) + 1px);
	background-color: var(--nav-drawer-bg-color);
	padding: 0 .75rem 0 0;
	z-index: 3010;
	color: #fff;
	margin-top: calc(var(--global-header-height) - 1px);
	transform: translate(-100%)
}

.navigation-drawer.is-active {
	transform: translate(0)
}

.navigation-drawer-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	z-index: 3000
}

.drawer-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1
}

.drawer-divider {
	border: none;
	border-bottom: 1px solid var(--primary-border-color);
	margin-right: -.75rem
}

.drawer-section-title {
	height: 3.5rem;
	padding: 0 1rem;
	font-size: 1.1rem;
	font-weight: 500;
	color: #fff;
	cursor: default;
	display: flex;
	align-items: center;
	line-height: 1.5
}

.navigation-drawer .icon {
	margin-right: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center
}

.logo {
	display: inline-flex;
	z-index:400
}

.logo svg {
	width: auto;
	height: 2rem
}

.burger-menu {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-right: 1rem
}

.burger-bar {
	display: block;
	width: 25px;
	height: 3px;
	background-color: #fff
}

.burger-menu svg,.drawer-back-button,.header-button svg,.search-back-button svg,.clear-button svg {
	fill: #fff
}

.burger-menu svg {
	pointer-events: none;
	display: inherit;
	width: 100%;
	height: 100%
}

.burger-menu {
	z-index: 500
}

.sidebar-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100svw;
	height: 100svh;
	max-height: 100%;
	z-index: 20;
	display: flex;
	flex-direction: column;
	transform: translateY(calc(100svh - (var(--sidebar-header-height-mobile) + var(--global-header-height))));
	transition: transform .3s ease-in-out
}

.sidebar-content.expanded {
	transform: translateY(0)
}

.sidebar-content.expanded .sidebar-header {
	border-radius: 0
}

.sidebar-header {
	color: #fff;
	height: var(--sidebar-header-height-mobile);
	width: 100%;
	display: grid;
	gap: 8px;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	padding: 10px 0;
	border-bottom: 0px solid var(--primary-border-color);
	border-radius: 0px;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 100;
	flex-shrink: 0
}

.header-actions {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: .25rem;
	padding-right: .5rem
}

.header-button {
	background: none;
	border: none;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	cursor: pointer
}

.random-button-header,.country-button-header{
	z-index: 400
}

.search-button {
	position: relative;
	z-index: 700
}

.search-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center
}

.app-container {
	display: flex;
	flex-direction: column;
	height: 100svh
}

.search-button.active:after {
	content: "";
	position: absolute;
	top: 0;
	right: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--highlight-red);
	pointer-events: none
}

.search-input {
	flex-grow: 1;
	border: none;
	outline: none;
	padding-right: 1rem;
	padding: .5rem 1rem;
	border-radius: 2rem;
	font-size: 1rem;
	background: transparent;
	color: #fff;
	font-family: inherit
}

.search-input:not(:placeholder-shown)~.clear-button {
	display: block
}

.search-input::placeholder {
	color: #fff9;
	opacity: 1
}

.search-input:focus {
	outline: none
}

.search-form {
	display: flex;
	align-items: center;
	width: 100%;
	margin-right: .75rem;
	justify-content: space-between;
	padding: .5rem;
	border-radius: 2rem;
	border: 1px solid rgba(255,255,255,.3);
	background-color: var(--search-bar-bg);
	position: relative;
	height: 2.5rem;
	max-height: 2.5rem
}

.search-toggle-content {
	position: absolute;
	right: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: var(--primary-bg-color);
	z-index: 600
}

.search-back-button {
	display: flex;
	margin-right: 10px;
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
	margin: 0 .75rem;
	padding: 0
}

.video-container {
	position: static;
	width: 100%;
	background-color: var(--primary-bg-color);
	border-radius: 0;
	transform: none;
	display: none;
	min-height: 56.25svw
}

.sidebar-video {
	display: block
}

.video-player-wrapper {
	position: relative;
	width: 100%;
	background-color: #000;
	overflow: hidden;
	aspect-ratio: 16 / 9
}

#video-player,#youtube-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none
}

#video-player.active,#youtube-player.active {
	display: block
}

.video-js {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9
}

.close-video {
	position: absolute;
	top: 6.5rem;
	right: .5rem;
	width: 1.625rem;
	height: 1.625rem;
	z-index: 1050;
	background-color: var(--highlight-red);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center
}

.modal-button.destructive {
	background-color: var(--destructive-button-color);
	color: #fff
}

.modal-button.destructive:hover {
	background-color: var(--destructive-button-hover-color)
}

.sidebar-entry.unavailable {
	opacity: .5;
	cursor: pointer
}

.sidebar-entry.unavailable:hover {
	opacity: .65
}

.favorite-toggle {
	position: absolute;
	top: 6.5rem;
	left: .5rem;
	width: 1.625rem;
	height: 1.625rem;
	background-color: var(--primary-bg-color);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	z-index: 1045;
	transition: transform .2s ease
}

.favorite-toggle[data-favorited=true] {
	background-color: var(--brand-accent-color)
}

.favorite-toggle[data-favorited=true] svg {
	fill: #fff;
	stroke: none
}

.mobile-handle {
	width: 1.5rem;
	height: 4px;
	background-color: #ffffff80;
	border-radius: 99px;
	align-self: end;
	justify-self: center;
	display: block;
	z-index: 2000
}

.local-time {
	text-align: right;
	min-width: 8ch
}

.sidebar {
	display: flex;
	flex-direction: column;
	height: 100svh;
	max-height: 100%;
	width: 100svw;
	max-width: 100%;
	color: #f1f1f1
}

.emoji-flag {
	font-family: "Apple Color Emoji","Noto Color Emoji",Twemoji Country Flags,"Noto Color Emoji Fallback",sans-serif;
	color: #000;
	width: 1rem
}

.sidebar-items {
	flex-grow: 1;
	overflow: auto;
	padding: 0 12px;
	background:#0e0c0c
}

.sidebar-items li {
	display: block;
	position: absolute;
	height: var(--sidebar-entry-height-mobile);
	min-width: 40px;
	width: 100%;
	flex-shrink: 0;
	border-radius: 5px
}

.sidebar-items div a {
	display: flex;
	align-items: center;
	padding: 0 12px;
	width: 100%;
	height: 100%
}

.sidebar-header-container {
	display: flex;
	align-items: center;
	justify-items: space-around
}

.header-info {
	display: grid;
	grid-template-columns: 1fr auto;
	width: 100%;
	height: 100%;
	padding: 0 1.5rem;
	line-height: 1.5rem
}

.hidden {
	display: none
}

.header-title {
	font-size: 1.5rem;
	line-height: 2rem;
	grid-column: 1 / -1;
	color: var(--highlight-text-color);
	align-self: flex-end
}

.back-to-country-list-button {
	top: 1.25rem;
	right: var(--sidebar-width);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: none;
	position: static;
	width: 2.5rem;
	height: 3rem;
	padding: 0;
	border-radius: 0 100% 100% 0;
	background: var(--brand-accent-color);
	cursor: pointer;
	pointer-events: auto
}

.back-to-country-list-button.active+.header-info {
	padding-left: 1rem
}

.back-to-country-list-button svg {
	fill: var(--primary-bg-color);
	width: 2rem;
	height: 2rem
}

.clear-button {
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	right: 3rem;
	top: 0;
	grid-column: 1;
	transform: translateY(0)
}

.globe-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden
}

.globe-viz {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10
}

.globe-interaction-blocker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 15;
	display: none
}

.loader-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - var(--sidebar-header-height-desktop) + var(--sidebar-header-border-radius));
	z-index: 10
}

.loader-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-background)
}

.loader-icon {
	border: 4px solid rgba(255,255,255,.3);
	border-top: 4px solid var(--highlight-text-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
}

.video-loading-overlay {
	display: none
}

.video-loading-overlay.active {
	display: block;
	position: absolute;
	background-color: var(--overlay-background);
	width: 100%;
	aspect-ratio: 16 / 9;
	z-index: 1010
}

.play-button-overlay {
	display: none
}

.play-button-overlay.active {
	position: absolute;
	background-color: var(--overlay-background);
	width: 100%;
	height: 100%;
	z-index: 1010;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer
}

.play-icon-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--brand-accent-color);
	border-radius: 50%;
	width: 3rem;
	height: 3rem
}

.play-icon-wrapper:hover {
	background: var(--brand-accent-hover-color);
	transform: scale(1.04)
}

.icon-wrapper {
	width: 1.5rem;
	height: 1.5rem
}

.play-icon {
	fill: var(--overlay-background);
	-webkit-user-select: none;
	user-select: none
}

.text-content h1,.text-content h2,.text-content h3 {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .015625rem;
	margin: 3rem 0 .75rem
}

.text-content h1,.text-content h2 {
	margin-top: 0
}

.text-content {
	width: 100%;
	max-width: 73ch;
	padding: 0;
	padding-bottom: 3rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .0125rem;
	color: #fff
}

.loading-indicator {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--brand-accent-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s ease-out;
	z-index: 1000
}

.globe-country-label {
	background-color: #ffffffb3;
	color: #333;
	padding: 2px 5px;
	border-radius: 3px;
	text-align: center
}

.sidebar-items li.sidebar-entry.playing .indicator {
	color: var(--selected-item-text-color-secondary)
}

.drawer-menu-button {
	height: 3.5rem;
	width: 100%;
	display: block;
	padding: 0 1rem;
	text-align: left;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center
}

.menu-logo-container {
	display: flex;
	align-items: center
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10
}

.media-container {
	display: flex;
	position: relative;
	overflow: hidden;
	max-height: 100%;
	height: 100%;
	width: 100%;
	background-color: var(--content-section-bg-color)
}

.section-close {
	justify-self: end;
	color: #fff;
	font-size: 2.5rem;
	cursor: pointer;
	line-height: 1.5
}

.sidebar-search-container {
	display: none
}

.search-actions {
	display: flex;
	align-items: center
}

.overlay,.nav-toggle,.sidebar-items div.filtered-out {
	display: none
}

.main {
	display: flex;
	flex-grow: 1;
	overflow: hidden;
	position: relative
}

.main-content {
	display: flex;
	flex-grow: 1;
	overflow: auto
}

.video-link {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	width: 100%;
	height: 100%;
	padding: 0 .75rem
}

.sidebar-items .no-channels-message {
	display: flex;
	align-items: center;
	height: var(--sidebar-entry-height-mobile);
	min-width: 40px;
	width: 100%;
	padding-left: .75rem
}

.channel-name-container {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	padding: 0 .75rem;
	line-height: 1.5rem;
	max-height: 3rem
}

.indicator-container .language-code {
	white-space: nowrap;
	font-size: .75rem;
	width: 3ch
}

.indicator-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: auto;
	gap: .5rem
}

.sidebar-entry {
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 100%;
	width: 100%
}

.sidebar-entry a:focus {
	outline: none
}

.sidebar-entry.hover-active {
	background-color: #ebebeb
}

.sidebar-items li.sidebar-entry.playing {
	color: var(--selected-item-text-color);
	font-weight: 700;
	background-color: var(--selected-item-bg-color);
	letter-spacing: -.0109rem
}

.search-button.disabled {
	opacity: .1;
	cursor: not-allowed;
	pointer-events: none
}

.drawer-header {
	display: flex;
	align-items: center;
	height: var(--global-header-height)
}

.content-container {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%
}

.text-content a {
	color: var(--highlight-text-color)
}

.text-content ol,.text-content ul {
	margin: 1rem 0;
	padding-left: 1rem
}

.text-content ol {
	list-style-type: decimal
}

.text-content ul {
	list-style-type: disc
}

.sidebar-items li.active {
	background-color: var(--hover-highlight-bg-color)
}

.sidebar-items li.active .indicator {
	color: var(--hover-secondary-text-color)
}

.indicator {
	font-size: .75rem;
	color: var(--secondary-text-color);
	height: 1rem;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center
}

.modal,.backdrop {
	display: none
}

.backdrop.active {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100svw;
	height: 100svh;
	background-color: #00000080;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	z-index: 500
}

.modal.active {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: 80svw;
	height: auto;
	max-width: 500px;
	min-width: 300px;
	max-height: 450px;
	display: grid;
	grid-template-rows: 3fr 1fr;
	border-radius: 25px;
	box-shadow: 0 4px 12px #00000040;
	z-index: 510;
	overflow: hidden;
	background-color: var(--primary-bg-color);
	line-height: 1.5
}

.modal-header {
	background-color: var(--primary-bg-color);
	display: grid;
	grid-template-rows: auto auto auto;
	padding: 20px;
	align-items: center;
	justify-items: center;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px
}

.modal-icon-wrapper {
	display: flex;
	justify-content: center
}

.modal-icon {
	width: 4rem;
	height: 4rem;
	color: var(--modal-content-color)
}

.modal-icon svg {
	width: 100%;
	height: 100%
}

.modal-title {
	font-size: 1.625rem;
	font-weight: 500;
	color: var(--modal-content-color);
	margin-top: .5rem
}

.modal-message {
	font-size: 1rem;
	line-height: 1.45;
	color: var(--modal-content-color);
	max-width: 85%;
	margin: .5rem auto
}

.modal-footer {
	background-color: var(--hover-highlight-bg-color);
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px
}

.modal-button {
	color: var(--modal-content-color);
	font-size: 1.5rem;
	width: 100%;
	height: 100%;
	cursor: pointer
}

.modal-button:focus {
	outline: none
}

@keyframes spin {
	0% {
		transform: translate(-50%,-50%) rotate(0)
	}

	to {
		transform: translate(-50%,-50%) rotate(360deg)
	}
}

@media only screen and (min-width: 601px) {
	.text-content {
		padding: 1rem;
		font-size: 1.25rem
	}

	.text-content h1,.text-content h2,.text-content h3 {
		margin: 4.375rem 0 1.25rem;
		font-size: 2.75rem
	}

	.text-content h1,.text-content h2 {
		margin-top: 0
	}

	.clear-button {
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
		cursor: pointer;
		color: #fff;
		display: none
	}

	.back-to-country-list-button:hover {
		background: var(--brand-accent-hover-color)
	}

	.back-to-country-list-button {
		position: absolute;
		width: auto;
		height: 2.5rem;
		padding-left: .275rem;
		border-radius: 40% 0 0 40%
	}

	.header-info {
		padding: 0
	}

	.back-to-country-list-button.active+.header-info {
		padding-left: initial
	}

	.sidebar-header-container {
		align-items: normal
	}

	.loader-wrapper {
		height: 100%
	}

	.mobile-handle {
		display: none
	}

	.close-video {
		z-index: 1020;
		width: 2rem;
		height: 2rem;
		top: -1.35rem;
		right: -1rem
	}

	.favorite-toggle {
		width: 2rem;
		height: 2rem;
		top: -1.35rem;
		right: 1.45rem;
		left: auto
	}

	.video-container {
		display: none;
		position: absolute;
		z-index: 1010;
		width: calc(80svw - var(--sidebar-width));
		padding: 20px;
		background-color: #000000b3;
		border-radius: 10px;
		box-shadow: 0 4px 6px #0000001a;
		align-items: center;
		justify-content: center;
		pointer-events: auto;
		top: calc(50svh - var(--global-header-height) - (80svw * 9 / 32) + (var(--sidebar-width) * 9 / 32));
		left: calc((100svw - var(--sidebar-width)) / 2 - ((80svw - var(--sidebar-width)) / 2));
		min-height: calc((80svw - var(--sidebar-width)) * 9 / 16)
	}

	.search-back-button {
		display: none
	}

	.search-toggle-content {
		width: 19rem
	}

	.search-form {
		margin-right: 0
	}

	.search-input {
		margin-right: 8px
	}

	.search-wrapper {
		position: relative
	}

	.header-actions {
		gap: .5rem
	}

	.global-header {
		position: relative
	}

	.drawer-menu-button:hover {
		background-color: var(--nav-drawer-item-hover-bg-color);
		border-radius: 0 3.125rem 3.125rem 0
	}

	.sidebar-content {
		position: static;
		width: var(--sidebar-width);
		transform: none
	}

	.sidebar-content.expanded {
		transform: none
	}

	.sidebar-header {
		height: var(--sidebar-header-height-desktop);
		padding: 0 24px;
		gap: 10px;
		grid-template-rows: none;
		border-radius: 0;
		align-items: stretch;
		cursor: default;
		pointer-events: none
	}

	.sidebar-items li,.sidebar-items .no-channels-message {
		height: var(--sidebar-entry-height-desktop)
	}

	.modal {
		width: 40svw;
		max-width: 500px;
		height: auto;
		max-height: 80svh
	}

	.modal-title {
		font-size: 2rem;
		font-weight: 500;
		text-align: center
	}

	.modal-message {
		font-size: 1.25rem;
		line-height: 1.55
	}

	.modal-button:hover {
		background-color: var(--nav-drawer-item-hover-bg-color)
	}
}



.dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background-color: var(--primary-bg-color);
    border-top: 1px solid var(--primary-border-color);
    position: relative;
    z-index: 10;
    transition: height 0.3s ease-in-out;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
    cursor: pointer;
}

.dashboard-handle {
    width: 3rem;
    height: 4px;
    background-color: #ffffff80;
    border-radius: 99px;
    margin-right: 0.5rem;
    pointer-events: none;
	z-index:400;
}
.dashboard-handle.active {
    background-color: #79C447;

}


.dashboard-buttons-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 控制按钮之间的间距 */
}

.dashboard-button-small {
	width:30%;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    border: none;
    background-color: var(--nav-drawer-item-hover-bg-color);
    color: var(--highlight-text-color);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
}

.dashboard-button-small:hover {
    color: #fff;
}

.dashboard-button-small.active {
	color: #fff;
    background-color: var(--destructive-button-hover-color);
}
.dashboard-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}
.dashboard-title:hover{
    color: var(--brand-accent-color);
}
.dashboard-title.active{
    color: var(--brand-accent-color);
}
.dashboard-buttons {
    display: flex;
    justify-content: space-around;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
}

.dashboard-button {
	width:20%;
    background-color: var(--nav-drawer-item-hover-bg-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    flex: 1;
    margin: 0 0.1rem;
}

.dashboard-button:hover{
	background-color: var(--brand-accent-hover-color);
	color: var(--overlay-background);
}	

.dashboard-button.active {
    background-color: var(--brand-accent-color); /* Highligh color */
    color: var(--brand-accent-hover-color);  /*Optional: Change text color for better contrast */
}

.marquee-ad {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 2rem;
    /*background-color: var(--primary-bg-color);
    border: 0px solid var(--primary-border-color);*/
    border-radius: 5px;
    margin: 0.5rem 0;

	height: 2rem;
	top: -1.8rem;
	left:1rem;
	right:6rem;
	z-index: 1045;	
}

.marquee-content
{
	white-space: nowrap;
    padding: 0 1rem;
    animation: marquee 60s linear infinite;	
}
.marquee-content a
{
    color: var(--highlight-text-color);
    font-size: 1rem;
    text-decoration: none;
}

.marquee-text {
}

.marquee-text:hover {
    text-decoration: underline; 
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media only screen and (max-width: 600px) {
	.marquee-ad  {
		display:none;
	}
}

.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem;
    background-color: var(--primary-bg-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
}

.scroll-to-top.hidden {
    opacity: 0;
    pointer-events: none;
}
.friend-links {
  margin: 2rem 0;
  width: 100%; 
  border-collapse: collapse;
  border: 1px solid var(--primary-border-color); 
}

.friend-link-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--primary-border-color); 
  flex-wrap: wrap; 
}

.friend-link-row:last-child {
  border-bottom: none;
}

.friend-link-row a {
  flex: 1;
  padding: 0.5rem;
  text-align: center;
  border-right: 1px solid var(--primary-border-color);
  text-decoration: none;
  color: var(--highlight-text-color);
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  flex-basis: 25%;
  max-width: 25%;
}

.friend-link-row a:last-child {
  border-right: none;
}

.friend-link-row a:hover {
  background-color: #79c447;
  color: white;
}
.bmc-header-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background .2s;z-index:400}
.bmc-header-btn:hover{background:rgba(255,221,0,.15)} /* 半透明黄底 */
.bmc-header-btn svg path{fill:#fff}                 /* 杯子白描边 */
.bmc-header-btn:hover svg path{fill:#FFDD00}        /* hover 黄杯 */
.Import-m3u-header-btn{z-index:400}


/* 导入界面特定样式 */
.import-title {
  color: var(--highlight-text-color);
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.import-description {
  color: var(--secondary-text-color);
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* 水平排列 */
.import-options {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.import-option {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  width: calc(50% - 0.75rem);
  box-sizing: border-box;
}

.option-card {
  display: block;
  cursor: pointer;
  border: 1px solid var(--primary-border-color);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  background-color: var(--nav-drawer-bg-color);
  height: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.option-card:hover {
  border-color: var(--highlight-text-color);
  background-color: var(--nav-drawer-item-hover-bg-color);
}

.option-card input[type="radio"] {
  display: none;
}

/* 隐藏的文件输入框 */
.file-input-hidden {
  display: none;
}

.option-card.active {
  border-color: var(--brand-accent-color);
  background-color: var(--nav-drawer-item-hover-bg-color);
}

.option-card.active .option-icon {
  background-color: var(--brand-accent-color);
}

.option-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: var(--primary-bg-color);
  transition: background-color 0.3s ease;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.option-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  width: calc(100% - 64px);
  position: absolute;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
}

.option-text h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
}

.option-text p {
  margin: 0;
  color: var(--secondary-text-color);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
}

/* 文件选择后的文本样式 */
#file-selected-text.has-file {
  color: var(--brand-accent-color);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
}

/* 主URL输入框样式 - 在导入按钮上方 */
.url-input-main-container {
  margin: 1.5rem 0;
}

.url-input-main {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--primary-border-color);
  border-radius: 8px;
  background-color: var(--nav-drawer-bg-color);
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.url-input-main:focus {
  outline: none;
  border-color: var(--brand-accent-color);
  background-color: var(--nav-drawer-item-hover-bg-color);
}

.url-input-main::placeholder {
  color: var(--secondary-text-color);
}

.import-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.import-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--brand-accent-color);
  color: var(--primary-bg-color);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.import-button:hover {
  background-color: var(--brand-accent-hover-color);
  transform: translateY(-2px);
}

.import-button:disabled {
  background-color: var(--secondary-text-color);
  cursor: not-allowed;
  transform: none;
}

/* 响应式设计 */
@media only screen and (max-width: 768px) {
  .import-options {
    flex-direction: column;
    gap: 1rem;
  }
  
  .import-option {
    flex: none;
    width: 100%;
  }
  
  .option-card {
    min-height: 100px;
    height: 100px;
  }
  
  .option-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
 /* 
  .option-icon {
    position: static;
    transform: none;
  }
 */ 
  .option-text {
    position: static;
    transform: none;
    width: 100%;
  }
  
  .import-button {
    width: 100%;
    justify-content: center;
  }
  
  .url-input-main-container {
    margin: 1rem 0;
  }
}

@media only screen and (max-width: 480px) {
  .option-card {
    min-height: 90px;
    height: 90px;
    padding: 0.75rem;
  }
 /* 
  .option-icon {
    width: 40px;
    height: 40px;
  }
 */ 
  .option-text h3 {
    font-size: 1rem;
  }
  
  .option-text p {
    font-size: 0.8rem;
  }
}