.mpv-viewer{
	position:relative;
	background:#fff;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	--mpv-sidebar-width: 180px;
	--mpv-thumb-gap: 10px;
	--mpv-thumb-pad: 8px;
	--mpv-thumb-inner-gap: 6px;
	--mpv-bottombar-row-height: 0px;
}

.mpv-viewer.mpv-embed-viewer{
	border:1px solid #b8b8b8;
}

.mpv-viewer.mpv-no-access{
	border:none;
	box-shadow:none;
}

.mpv-viewer[hidden]{
	display:none !important;
}

.mpv-btn{
	appearance:none;
	border:1px solid #cfcfcf;
	background:#fff;
	padding:6px 10px;
	border-radius:4px;
	cursor:pointer;
	font-size:14px;
}

.mpv-body{
	flex:1 1 auto;
	min-height:0;
	display:flex;
	min-width:0;
}

.mpv-main{
	position:relative;
	flex:1 1 0%;
	min-width:0;
	min-height:0;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

.mpv-canvas-wrap{
	flex:1 1 0%;
	min-height:0;
	overflow:auto;
	padding:12px;
	padding-bottom:90px;
	display:flex;
	flex-direction:column;
	gap:12px;
	overscroll-behavior:contain;
	/* GPU-accelerated scrolling */
	-webkit-overflow-scrolling:touch;
	will-change:scroll-position;
	contain:layout paint;
}

.mpv-canvas-wrap.mpv-pan-enabled{
	cursor:grab;
	user-select:none;
}

.mpv-canvas-wrap.mpv-panning{
	cursor:grabbing;
}

.mpv-page-sizer{
	position:relative;
	width:100%;
	flex-shrink:0;
}

.mpv-page{
	box-sizing:border-box;
	position:absolute;
	left:0;
	width:fit-content;
	min-width:100%;
	background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.08);
	border:1px solid #eee;
	padding:8px;
	display:flex;
	justify-content:center;
	/* GPU compositing for smoother scroll */
	contain:layout style paint;
	transition:none !important;
}

.mpv-page canvas{
	display:block;
	background:#fff;
	max-width:none;
	/* GPU acceleration hint */
	will-change:contents;
	contain:strict;
	transition:none !important;
}

.mpv-page.mpv-lock-page{
	background:#fff;
}

.mpv-lock-page-overlay{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:48px 24px;
	box-sizing:border-box;
	text-align:center;
	pointer-events:auto;
}

.mpv-lock-page-cta{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	max-width:560px;
	color:inherit;
	text-decoration:none;
	pointer-events:auto;
}

.mpv-lock-page-icon{
	position:relative;
	width:88px;
	height:88px;
	opacity:.7;
}

.mpv-lock-page-icon::before,
.mpv-lock-page-icon::after{
	content:'';
	position:absolute;
	inset:0;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	transform-origin:center;
	transition:opacity .34s ease, transform .34s ease;
}

.mpv-lock-page-icon::before{
	background-image:url('../icons/general/lock.svg');
	opacity:1;
	transform:translateY(0) rotate(0deg) scale(1);
}

.mpv-lock-page-icon::after{
	background-image:url('../icons/general/unlock.svg');
	opacity:0;
	transform:translateY(10px) rotate(-12deg) scale(.85);
}

.mpv-lock-page-cta:hover .mpv-lock-page-icon::before,
.mpv-lock-page-cta:focus-visible .mpv-lock-page-icon::before{
	opacity:0;
	transform:translateY(-8px) rotate(-16deg) scale(.82);
}

.mpv-lock-page-cta:hover .mpv-lock-page-icon::after,
.mpv-lock-page-cta:focus-visible .mpv-lock-page-icon::after{
	opacity:1;
	transform:translateY(0) rotate(0deg) scale(1);
}

.mpv-lock-page-text,
.mpv-lock-page-link-text{
	max-width:560px;
	font-size:16px;
	line-height:1.35;
	color:#666;
}

.mpv-lock-page-link{
	color:inherit;
}

.mpv-lock-page-link-text{
	text-decoration:underline;
}

.mpv-canvas-wrap.mpv-fit-width .mpv-page{
	width:100%;
}

.mpv-canvas-wrap.mpv-fit-width .mpv-page canvas{
	max-width:100%;
	height:auto;
}

.mpv-floating-controls{
	position:absolute;
	left:50%;
	bottom:12px;
	transform:translateX(-50%);
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	white-space:nowrap;
	gap:6px;
	padding:10px 12px;
	border-radius:999px;
	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;
	max-width:calc(100% - 24px);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.25);
	pointer-events:auto;
	transition:opacity .16s ease, transform .16s ease;
}

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

.mpv-ctrl{
	appearance:none;
	border:0;
	background:transparent;
	color:inherit;
	padding:6px 8px;
	border-radius:999px;
	cursor:pointer;
	line-height:1;
	font-size:14px;
	min-height:var(--mpv-bottombar-row-height, 0px);
	box-sizing:border-box;
}

.mpv-ctrl .dashicons{
	font-size:18px;
	width:18px;
	height:18px;
	line-height:18px;
	vertical-align:middle;
}

.mpv-ctrl .dashicons:before{
	color:currentColor;
}

.mpv-ctrl:hover,
.mpv-ctrl:focus-visible{
	outline:none;
	background:rgba(255,255,255,.12);
}

.mpv-svg{
	display:block;
}

.mpv-ctrl-sep{
	width:1px;
	height:22px;
	background:rgba(255,255,255,.18);
	margin:0 2px;
}

.mpv-page-indicator{
	display:flex;
	align-items:center;
	gap:6px;
	padding:0 4px;
	min-width:0;
	min-height:var(--mpv-bottombar-row-height, 0px);
	box-sizing:border-box;
}

.mpv-page-input{
	width:clamp(44px, 5ch, 64px);
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	border-radius:8px;
	padding:5px 8px;
	font-size:13px;
	text-align:center;
}

/* Remove number spinners where possible for cleaner alignment */
.mpv-page-input::-webkit-outer-spin-button,
.mpv-page-input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}
.mpv-page-input{
	-moz-appearance:textfield;
	appearance:textfield;
}

.mpv-page-input:focus{
	outline:none;
	border-color:rgba(255,255,255,.35);
}

.mpv-page-total{
	font-size:13px;
	opacity:.9;
	white-space:nowrap;
}


.mpv-ctrl-fit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0;
}

.mpv-fit-visual{
	position:relative;
	width:34px;
	height:18px;
	flex:0 0 auto;
}

.mpv-fit-icon{
	position:absolute;
	left:50%;
	top:50%;
	width:18px;
	height:18px;
	display:block;
	filter:brightness(0) invert(1);
	opacity:.95;
	transform:translate(-50%, -50%) rotate(0deg);
	transform-origin:center;
	transition:transform .22s ease, opacity .18s ease;
	pointer-events:none;
}

.mpv-ctrl-fit[data-fit="height"] .mpv-fit-icon{
	transform:translate(-50%, -50%) rotate(90deg);
}

.mpv-fit-label{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
	opacity:0;
	transition:opacity .18s ease;
	pointer-events:none;
}

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


.mpv-ctrl-fit.mpv-fit-show-label .mpv-fit-label{
	opacity:1;
}

.mpv-ctrl-fit.mpv-fit-show-label .mpv-fit-icon{
	opacity:0;
}

.mpv-ctrl-fit.mpv-fit-fading .mpv-fit-label{
	opacity:0;
}

@media (max-width: 480px){
	.mpv-page-input{width:54px;}
}

.mpv-viewer.mpv-compact .mpv-canvas-wrap{
	padding:10px;
	padding-bottom:108px;
}

.mpv-viewer.mpv-compact .mpv-floating-controls{
	gap:4px;
	padding:8px 10px;
	border-radius:18px;
	max-width:calc(100% - 16px);
}

.mpv-viewer.mpv-compact .mpv-ctrl-sep{
	display:none;
}

.mpv-viewer.mpv-compact .mpv-page-input{
	width:56px;
}

.mpv-viewer.mpv-narrow .mpv-canvas-wrap{
	padding:8px;
	padding-bottom:138px;
}

.mpv-viewer.mpv-narrow .mpv-floating-controls{
	width:auto;
	max-width:calc(100% - 16px);
	flex-wrap:nowrap;
	white-space:nowrap;
	row-gap:0;
	column-gap:4px;
	padding:8px 10px;
	border-radius:18px;
	overflow:hidden;
	box-sizing:border-box;
}

.mpv-viewer .mpv-floating-controls.mpv-controls-wrap{
	width:min(340px, calc(100% - 16px));
	max-width:calc(100% - 16px);
	flex-wrap:wrap;
	white-space:normal;
	row-gap:4px;
	column-gap:4px;
	padding:8px 10px;
	border-radius:18px;
	overflow:visible;
	box-sizing:border-box;
}

.mpv-viewer .mpv-floating-controls.mpv-controls-wrap .mpv-page-indicator{
	order:-1;
	flex:1 1 100%;
	justify-content:center;
	padding:0;
	min-width:0;
}

.mpv-viewer.mpv-narrow .mpv-ctrl{
	padding:7px 8px;
}

.mpv-viewer.mpv-narrow .mpv-lock-page-overlay{
	padding:32px 18px;
}

.mpv-viewer.mpv-narrow .mpv-lock-page-icon{
	width:72px;
	height:72px;
}

.mpv-viewer.mpv-narrow .mpv-lock-page-text,
.mpv-viewer.mpv-narrow .mpv-lock-page-link-text{
	font-size:15px;
}

.mpv-status{
	position:absolute;
	z-index:9;
}

.mpv-status-loading{
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	background:transparent;
	padding:0;
	border-radius:0;
	color:inherit;
	pointer-events:none;
}

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

.mpv-error{
	padding:10px;
	border:1px solid #f0c36d;
	background:#fff8e5;
}

/* Modal overlay */
.mpv-modal-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.7);
	z-index:99999;
	display:flex;
	align-items:stretch;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
}

.mpv-modal{
	width:min(1200px, 100%);
	flex:1 1 auto;
	max-height:100%;
	background:#fff;
	border-radius:8px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

.mpv-modal .mpv-viewer{
	flex:1 1 auto;
	height:auto !important;
	min-height:0;
	border:none;
	border-radius:0 !important;
}

.mpv-viewer.mpv-fullscreen-open,
.mpv-viewer:fullscreen,
.mpv-viewer:-webkit-full-screen{
	border-radius:0 !important;
}

.mpv-modal-header{
	display:flex;
	justify-content:flex-end;
	padding:8px;
	border-bottom:1px solid #e2e2e2;
	background:#f7f7f7;
}

.mpv-no-access-image-wrap{
	flex:1 1 auto;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	position:relative;
	padding:12px;
	box-sizing:border-box;
}

.mpv-no-access-image-overlay{
	padding:24px;
	background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.22) 100%);
	pointer-events:none;
}

.mpv-no-access-image-lock-box{
	width:min(100%, 560px);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:28px 24px;
	border:1px solid rgba(0, 0, 0, .08);
	border-radius:18px;
	background:rgba(255, 255, 255, .86);
	box-shadow:0 16px 40px rgba(0, 0, 0, .18);
	backdrop-filter:blur(4px);
	pointer-events:auto;
	box-sizing:border-box;
}

.mpv-no-access-image{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
}

@media (max-width: 768px){
	.mpv-modal-overlay{
		padding:8px;
	}

	.mpv-modal{
		width:100%;
		border-radius:0;
	}

	.mpv-modal-header{
		padding:6px;
	}
}