.centered-element {
	position: fixed;
	left: 50%;
	transition:
		transform var(--duration-base) var(--ease-in-out-cubic),
		opacity var(--duration-base) var(--ease-default);
	will-change: transform, opacity;
	backface-visibility: hidden;
}

@media screen and (max-width: 479px) {
	.centered-element {
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	.centered-element {
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 1024px) {
	.centered-element {
		transform: translateX(calc(-50% + var(--desktop-base-offset)));
	}

	.sidebar.collapsed + .main-content .centered-element {
		transform: translateX(-50%);
	}
}

.centered-element.vertical-center {
	top: 50%;
}

@media screen and (max-width: 479px) {
	.centered-element.vertical-center {
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	.centered-element.vertical-center {
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width: 1024px) {
	.centered-element.vertical-center {
		transform: translate(calc(-50% + var(--desktop-base-offset)), -50%);
	}

	.sidebar.collapsed + .main-content .centered-element.vertical-center {
		transform: translate(-50%, -50%);
	}
}

/* 手机（含横屏触屏设备）居中元素的垂直位置；
   any-pointer 与 getDeviceType() 一致：只要有触屏输入就算触屏设备 */
@media screen and (max-width: 479px),
	screen and (any-pointer: coarse) and (max-height: 599px) {
	.search-container.centered-element {
		top: 20px;
		transform: translateX(-50%);
	}

	.home-message.centered-element,
	.no-results.centered-element {
		top: 45%;
		transform: translate(-50%, -50%);
	}

	.error-message.centered-element {
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width: 1024px) and (any-pointer: coarse) and (
		max-height: 599px
	) {
	.search-container.centered-element {
		transform: translateX(calc(-50% + var(--desktop-base-offset)));
	}

	.home-message.centered-element,
	.no-results.centered-element,
	.error-message.centered-element {
		transform: translate(calc(-50% + var(--desktop-base-offset)), -50%);
	}

	.sidebar.collapsed + .main-content .search-container.centered-element {
		transform: translateX(-50%);
	}

	.sidebar.collapsed + .main-content .home-message.centered-element,
	.sidebar.collapsed + .main-content .no-results.centered-element,
	.sidebar.collapsed + .main-content .error-message.centered-element {
		transform: translate(-50%, -50%);
	}
}

@media screen and (max-width: 479px) {
	body {
		overflow-y: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	body::-webkit-scrollbar {
		display: none;
	}

	.main-content {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.main-content::-webkit-scrollbar {
		display: none;
	}

	.custom-scroll-indicator {
		display: none;
	}

	.mobile-device [onclick],
	.mobile-device button,
	.mobile-device .folder,
	.mobile-device .breadcrumb-item,
	.mobile-device #toggle-sidebar,
	.mobile-device .home-button,
	.mobile-device .theme-toggle,
	.mobile-device a {
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.mobile-device #toggle-sidebar:hover {
		box-shadow:
			var(--button-shadow),
			inset 0 0 0 1px rgba(255, 255, 255, 0.5);
		transform: translateZ(0);
	}

	.mobile-device #toggle-sidebar:hover img {
		transform: none;
	}

	.sidebar {
		z-index: 1001;
		left: -220px;
		transition: left var(--duration-short) var(--ease-in-out-cubic);
	}

	.sidebar:not(.collapsed) {
		left: 0;
	}

	.mobile-device .main-content,
	.mobile-device .sidebar.collapsed + .main-content,
	.mobile-device .sidebar:not(.collapsed) + .main-content {
		margin: 0 auto;
		width: 100%;
		max-width: 600px;
		padding: 15px 25px;
		position: relative;
		box-sizing: border-box;
		contain: layout style;
		will-change: auto;
		backface-visibility: hidden;
		transform: translateZ(0);
		min-height: 100vh;
	}

	#content .folder,
	#content .bookmark,
	#breadcrumbs,
	.breadcrumb-item {
		transform: none;
		transition: opacity 0.2s ease;
		will-change: auto;
		contain: layout;
	}

	#content {
		min-height: 200px;
		contain: layout style;
	}

	.search-container {
		top: 20px;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shortcut-hint {
		display: none;
	}

	#search-input {
		width: 200px;
		max-width: calc(100vw - 40px);
		margin: 0;
	}

	#theme-toggle {
		margin-left: 10px;
		flex-shrink: 0;
	}

	#breadcrumbs {
		padding: 50px 25px 0;
		font-size: clamp(1rem, 5vw, 1.2rem);
		width: 100%;
		max-width: 600px;
		margin: 0 auto 1rem;
		line-height: 1.4;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		contain: layout;
		min-height: 40px;
	}

	.breadcrumb-item {
		padding: 8px 12px;
		margin: 0;
		background: var(--bg-color);
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		white-space: nowrap;
		flex-shrink: 0;
		transition:
			transform 0.15s ease,
			background-color 0.15s ease;
	}

	.breadcrumb-separator {
		margin: 0;
		opacity: 0.7;
		color: var(--text-color);
		flex-shrink: 0;
		transform: scale(0.9);
	}

	button.breadcrumb-item {
		min-height: 40px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		touch-action: manipulation;
		position: relative;
		overflow: hidden;
	}

	.mobile-device .breadcrumb-item:active {
		transform: scale(0.95);
		background-color: var(--button-bg);
	}

	.breadcrumb-item:last-child {
		background-color: var(--button-bg);
		opacity: 0.8;
		pointer-events: none;
	}

	#breadcrumbs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 5px;
		position: relative;
		scroll-padding: 0 20px;
		scroll-snap-type: x proximity;
	}

	.breadcrumb-item {
		scroll-snap-align: start;
		scroll-margin-right: 20px;
	}

	#breadcrumbs::-webkit-scrollbar {
		display: none;
	}

	#breadcrumbs::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 20px;
		height: 20px;
		background: var(--text-color);
		opacity: 0.3;
		border-radius: 50%;
		transform: translateY(-50%);
		pointer-events: none;
		animation: pulseRight 1.5s infinite;
	}

	#breadcrumbs:not(.scrollable)::after {
		display: none;
	}

	#content .bookmark a {
		max-width: 80%;
	}

	.home-message {
		top: 45%;
		width: 90%;
		max-width: 400px;
	}

	.home-message .chinese-text {
		font-size: clamp(1.5rem, 8vw, 2rem);
		line-height: 1.4;
		margin-bottom: 0.5rem;
		word-break: keep-all;
	}

	.home-message .english-text {
		font-size: clamp(1rem, 6vw, 1.5rem);
		line-height: 1.4;
		word-break: break-word;
	}

	.no-results {
		width: 90%;
		max-width: 400px;
	}

	.error-message {
		width: 90%;
		max-width: 400px;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	.search-container {
		top: 20px;
		display: flex;
		align-items: center;
		z-index: 999;
		white-space: nowrap;
		user-select: none;
		contain: layout;
		outline: none;
	}

	.home-message {
		font-weight: bold;
		text-align: center;
		user-select: none;
		opacity: 0;
		perspective: 1000px;
		transform-style: preserve-3d;
		content-visibility: auto;
		outline: none;
	}
}

@media screen and (min-width: 1024px) {
	.search-container {
		top: 20px;
		display: flex;
		align-items: center;
		z-index: 999;
		white-space: nowrap;
		user-select: none;
		contain: layout;
		outline: none;
		transform-style: preserve-3d;
	}

	.home-message {
		font-weight: bold;
		text-align: center;
		user-select: none;
		opacity: 0;
		perspective: 1000px;
		transform-style: preserve-3d;
		content-visibility: auto;
		outline: none;
	}
}