.mpv-viewer{
	--mpv-topbar-center-max-width:100%;
	--mpv-topbar-search-width:300px;
	--mpv-topbar-search-panel-width:300px;
	--mpv-topbar-search-panel-offset:0px;
	--mpv-topbar-share-width:420px;
	--mpv-topbar-panel-max-height:460px;
	--mpv-topbar-panel-list-max-height:390px;
	--mpv-topbar-row-height:0px;
}

.mpv-floating-top{
	position:absolute;
	left:0;
	right:0;
	top:0;
	z-index:10;
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:6px;
	padding:10px 12px;
	border-radius:0;
	background:rgba(0,0,0,.65);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	color:#fff;
	height:auto;
	min-height:0;
	box-sizing:border-box;
	box-shadow:0 10px 30px rgba(0,0,0,.25);
	pointer-events:auto;
	transition:opacity .16s ease, transform .16s ease;
}

.mpv-floating-top.mpv-topbar-wrap-active{
	align-items:start;
}

.mpv-floating-top.mpv-proximity-hidden{
	opacity:0;
	transform:translateY(-10px);
	pointer-events:none;
}

.mpv-floating-top-center{
	grid-column:2;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-width:0;
	max-width:min(100%, var(--mpv-topbar-center-max-width, 100%));
	overflow-x:auto;
	overflow-y:hidden;
	padding-bottom:2px;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

.mpv-floating-top-center.mpv-topbar-wrap{
	width:min(100%, var(--mpv-topbar-center-max-width, 100%));
	max-width:min(100%, var(--mpv-topbar-center-max-width, 100%));
	flex-wrap:wrap;
	justify-content:center;
	align-content:flex-start;
	row-gap:8px;
	column-gap:6px;
	overflow:visible;
	padding-bottom:0;
}

.mpv-floating-top-center.mpv-topbar-wrap .mpv-topbar-group{
	flex:0 1 auto;
	flex-wrap:wrap;
	justify-content:center;
	row-gap:4px;
	column-gap:4px;
	min-width:0;
	max-width:100%;
}

.mpv-floating-top-center.mpv-topbar-wrap .mpv-topbar-group-search{
	flex:1 1 100%;
	justify-content:center;
	align-items:center;
	gap:6px;
	min-width:0;
}

.mpv-floating-top-center.mpv-topbar-wrap .mpv-topbar-search-shell.is-open{
	flex:0 1 min(100%, var(--mpv-topbar-search-width, 300px));
	min-width:0;
}

.mpv-floating-top-center.mpv-topbar-wrap .mpv-topbar-btn-search{
	flex:0 0 auto;
}

.mpv-floating-top-center.mpv-topbar-wrap .mpv-topbar-sep{
	display:none;
}

.mpv-floating-top-center.mpv-search-open{
	overflow-x:visible;
	overflow-y:visible;
}

.mpv-floating-top-center::-webkit-scrollbar{
	display:none;
}

.mpv-floating-top-right{
	grid-column:3;
	justify-self:end;
	display:flex;
	align-items:center;
	min-height:var(--mpv-topbar-row-height, 0px);
	box-sizing:border-box;
}

.mpv-floating-top.mpv-topbar-wrap-active .mpv-floating-top-right{
	align-self:start;
}

.mpv-viewer.mpv-compact .mpv-floating-top{
	grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
	gap:8px;
	padding:8px 10px;
}

.mpv-viewer.mpv-compact .mpv-floating-top-center{
	grid-column:2;
	justify-content:center;
	max-width:min(100%, var(--mpv-topbar-center-max-width, 100%));
	min-width:0;
	gap:6px;
	padding-bottom:0;
}

.mpv-viewer.mpv-compact .mpv-floating-top-right{
	grid-column:3;
	min-width:max-content;
}

.mpv-viewer.mpv-compact .mpv-topbar-group{
	gap:2px;
}

.mpv-topbar-group{
	display:flex;
	align-items:center;
	gap:4px;
	flex:0 0 auto;
	min-height:var(--mpv-topbar-row-height, 0px);
	box-sizing:border-box;
}

.mpv-topbar-group-search{
	position:relative;
}

.mpv-topbar-search-shell{
	overflow:hidden;
	width:1px;
	opacity:0;
	pointer-events:none;
	transition:width .18s ease, opacity .14s ease;
}

.mpv-topbar-search-shell.is-open{
	width:var(--mpv-topbar-search-width, 300px);
	max-width:100%;
	opacity:1;
	pointer-events:auto;
	min-height:var(--mpv-topbar-row-height, 0px);
	display:flex;
	align-items:center;
	box-sizing:border-box;
}

.mpv-topbar-search-shell.is-inactive .mpv-topbar-search-input{
	border-color:rgba(255,255,255,.14);
	background:rgba(255,255,255,.07);
	color:rgba(255,255,255,.8);
}

.mpv-topbar-search-input{
	width:100%;
	height:32px;
	box-sizing:border-box;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.24);
	background:rgba(255,255,255,.12);
	color:#fff;
	padding:0 12px;
	font-size:12px;
	outline:none;
}

.mpv-topbar-search-input::placeholder{
	color:rgba(255,255,255,.68);
}

.mpv-topbar-search-input::-webkit-search-cancel-button{
	-webkit-appearance:none;
	appearance:none;
	height:14px;
	width:14px;
	cursor:pointer;
	border-radius:50%;
	opacity:.9;
	background:
		linear-gradient(45deg, transparent 42%, rgba(255,255,255,.95) 42%, rgba(255,255,255,.95) 58%, transparent 58%),
		linear-gradient(-45deg, transparent 42%, rgba(255,255,255,.95) 42%, rgba(255,255,255,.95) 58%, transparent 58%);
}

.mpv-topbar-search-input::-webkit-search-cancel-button:hover{
	opacity:1;
}

.mpv-topbar-search-input:focus{
	border-color:rgba(255,255,255,.38);
	background:rgba(255,255,255,.16);
}

.mpv-search-results-panel{
	position:absolute;
	top:38px;
	left:var(--mpv-topbar-search-panel-offset, 0px);
	width:var(--mpv-topbar-search-panel-width, var(--mpv-topbar-search-width, 300px));
	max-width:100%;
	max-height:var(--mpv-topbar-panel-max-height, 460px);
	border-radius:10px;
	border:1px solid rgba(0,0,0,.08);
	background:rgba(255,255,255,.94);
	box-shadow:0 12px 28px rgba(0,0,0,.18);
	z-index:35;
	display:none;
	overflow:hidden;
	color:#111;
	opacity:0;
	transform:translateY(-6px);
}

.mpv-search-results-panel.is-open{
	display:flex;
	flex-direction:column;
	opacity:1;
	transform:translateY(0);
}

.mpv-search-results-head{
	padding:8px 10px;
	border-bottom:1px solid rgba(0,0,0,.08);
	display:flex;
	flex-direction:column;
	gap:6px;
}

.mpv-search-status{
	min-height:16px;
	font-size:11px;
	color:rgba(0,0,0,.76);
	display:flex;
	align-items:center;
	gap:7px;
}

.mpv-search-spinner{
	width:12px;
	height:12px;
	display:inline-block;
	background:transparent url('../icons/general/spinner.svg') center/contain no-repeat;
}

.mpv-search-nav{
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:nowrap;
}

.mpv-search-summary{
	flex:1 1 auto;
	min-width:0;
	font-size:11px;
	color:rgba(0,0,0,.62);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.mpv-search-nav-btn{
	appearance:none;
	border:1px solid rgba(0,0,0,.16);
	background:#fff;
	color:#111;
	border-radius:999px;
	height:24px;
	padding:0 10px;
	font-size:11px;
	cursor:pointer;
}

.mpv-search-nav-btn:hover,
.mpv-search-nav-btn:focus{
	outline:none;
	background:rgba(0,0,0,.04);
}

.mpv-search-results-panel.mpv-search-panel-compact .mpv-search-results-head{
	gap:8px;
}

.mpv-search-results-panel.mpv-search-panel-compact .mpv-search-nav{
	flex-wrap:wrap;
	align-items:stretch;
}

.mpv-search-results-panel.mpv-search-panel-compact .mpv-search-summary{
	flex:1 1 100%;
	white-space:normal;
	text-overflow:clip;
	overflow:visible;
	line-height:1.35;
}

.mpv-search-results-panel.mpv-search-panel-compact .mpv-search-nav-btn{
	flex:1 1 calc(50% - 3px);
	justify-content:center;
	min-width:0;
	padding:0 8px;
}

.mpv-search-nav-btn:disabled{
	opacity:.45;
	cursor:default;
}

.mpv-search-results-list{
	overflow:auto;
	min-height:80px;
	max-height:var(--mpv-topbar-panel-list-max-height, 390px);
	padding:2px 0;
	display:flex;
	flex-direction:column;
	scrollbar-width:thin;
	scrollbar-color:rgba(0,0,0,.26) transparent;
}

.mpv-search-results-list::-webkit-scrollbar{
	width:8px;
}

.mpv-search-results-list::-webkit-scrollbar-track{
	background:transparent;
}

.mpv-search-results-list::-webkit-scrollbar-thumb{
	background:rgba(0,0,0,.24);
	border-radius:999px;
	border:2px solid transparent;
	background-clip:padding-box;
}

.mpv-search-result-item{
	appearance:none;
	border:0;
	background:transparent;
	padding:8px 10px;
	text-align:left;
	cursor:pointer;
	border-bottom:1px solid rgba(0,0,0,.08);
	display:flex;
	flex-direction:column;
	gap:4px;
	color:#111;
}

.mpv-search-result-item:last-child{
	border-bottom:0;
}

.mpv-search-result-item:hover,
.mpv-search-result-item:focus,
.mpv-search-result-item.is-active{
	outline:none;
	background:rgba(0,0,0,.045);
}

.mpv-search-result-page{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.45px;
	color:rgba(0,0,0,.56);
}

.mpv-search-result-snippet{
	font-size:12px;
	line-height:1.4;
	color:rgba(0,0,0,.86);
	word-break:break-word;
}

.mpv-search-result-snippet mark{
	background:rgba(0,0,0,.10);
	color:#111;
	padding:0 1px;
	border-radius:2px;
}

.mpv-topbar-btn{
	padding:6px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:var(--mpv-topbar-row-height, 0px);
	box-sizing:border-box;
}

.mpv-topbar-btn.is-active,
.mpv-topbar-btn[aria-pressed="true"]{
	background:rgba(255,255,255,.2);
}

.mpv-topbar-icon{
	width:18px;
	height:18px;
	display:block;
	filter:brightness(0) invert(1);
	opacity:.95;
	pointer-events:none;
}

.mpv-topbar-btn-right-outline .mpv-topbar-icon{
	transform:scaleX(-1);
}

.mpv-topbar-sep{
	width:1px;
	height:18px;
	background:rgba(255,255,255,.24);
	flex:0 0 auto;
}

.mpv-viewer.mpv-narrow .mpv-floating-top{
	padding:8px;
	gap:6px;
}

.mpv-viewer.mpv-narrow .mpv-topbar-group{
	gap:1px;
}

.mpv-viewer.mpv-narrow .mpv-topbar-sep{
	display:none;
}

.mpv-viewer.mpv-narrow .mpv-topbar-btn{
	padding:6px 5px;
}

.mpv-share-popup{
	position:absolute;
	top:52px;
	left:50%;
	transform:translateX(-50%);
	width:var(--mpv-topbar-share-width, 420px);
	max-width:calc(100% - 24px);
	padding:12px;
	border-radius:10px;
	background:rgba(28,28,28,.94);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 12px 28px rgba(0,0,0,.30);
	color:#f2f2f2;
	z-index:32;
	display:none;
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
}

.mpv-share-popup.is-open{
	display:block;
}

.mpv-share-popup-title{
	font-size:13px;
	font-weight:600;
	margin:0 0 8px;
	letter-spacing:.1px;
}

.mpv-share-popup-input-wrap{
	margin:0 0 10px;
}

.mpv-share-popup-input{
	width:100%;
	height:34px;
	box-sizing:border-box;
	border-radius:8px;
	border:1px solid rgba(255,255,255,.16);
	background:rgba(255,255,255,.07);
	color:#fff;
	padding:0 10px;
	font-size:12px;
	outline:none;
}

.mpv-share-popup-input:focus{
	border-color:rgba(255,255,255,.34);
	box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
}

.mpv-share-popup-actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
}

.mpv-share-popup.mpv-share-popup-compact .mpv-share-popup-actions{
	flex-wrap:wrap;
	justify-content:stretch;
}

.mpv-share-popup.mpv-share-popup-compact .mpv-share-popup-btn{
	display:inline-flex;
	align-items:center;
	flex:1 1 calc(50% - 4px);
	min-width:0;
	justify-content:center;
}

.mpv-share-popup-btn{
	appearance:none;
	height:30px;
	padding:0 12px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.20);
	background:rgba(255,255,255,.08);
	color:#fff;
	cursor:pointer;
	font-size:12px;
	line-height:1;
}

.mpv-share-popup-btn:hover,
.mpv-share-popup-btn:focus{
	background:rgba(255,255,255,.14);
	outline:none;
}

.mpv-share-popup-btn.is-primary{
	background:rgba(255,255,255,.20);
	border-color:rgba(255,255,255,.30);
}

.mpv-share-popup-status{
	margin-top:8px;
	min-height:16px;
	font-size:11px;
	color:rgba(255,255,255,.78);
}

.mpv-share-popup-status.is-error{
	color:rgba(255,210,210,.9);
}