.zb-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 900;
	display: flex;
	justify-content: center;

	pointer-events: none;
	transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s ease;
}
.zb-dock.is-left { justify-content: flex-start; padding-left: 24px; }
.zb-dock.is-right { justify-content: flex-end; padding-right: 24px; }

.zb-dock-display-scroll .zb-dock.is-dock-hidden {
	transform: translateY(calc(100% + 24px));
	opacity: 0;
}
/*
 * 注意：rimini 原版还有一条 `.is-dock-hidden.at-bottom { transform:none; opacity:1 }`
 * （滚到页面最底部就强制显示）。这里刻意没抄 —— 内容只比一屏高一点的页面，
 * 滚两下就到底，dock 会一直冒出来挡住下面正在看的内容。
 * 要完全照原版：把这条规则加回来，并让 dock.js 在到底时给 dock 加 at-bottom。
 */
.zb-dock-display-scroll .zb-dock.is-dock-hidden:hover,
.zb-dock-display-scroll .zb-dock.is-dock-hidden:focus-within {
	transform: translateY(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.zb-dock { transition: none; }
}

.zb-dock-inner {
	display: flex;
	align-items: center;
	gap: var(--dock-gap, 12px);
	padding: 10px 14px;
	pointer-events: auto;

	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--dock-radius, 22px);
	box-shadow: 0 8px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
	max-width: calc(100vw - 32px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.zb-dock-inner::-webkit-scrollbar { display: none; }

.zb-dock .dock-sep {
	flex: 0 0 auto;
	width: 1px;
	height: var(--dock-icon, 52px);
	margin: 0 4px;
	background: rgba(31, 34, 38, .18);
}

.zb-dock .dock-item {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--dock-icon, 52px);
	height: var(--dock-icon, 52px);
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: calc(var(--dock-icon, 52px) * .24);
	color: #1f2226;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
/* rimini 现网的 <button> 项（随便逛逛 / 复制本页 / 返回顶部）不带投影 —— 主题那边有
   button 的 reset 把它去掉了。a 项带 box-shadow。照抄这个差异，混排时才和参考站一模一样。 */
.zb-dock .dock-item.is-action { box-shadow: none; }
.zb-dock .dock-item.is-action:hover,
.zb-dock .dock-item.is-action:focus-visible {
	box-shadow: 0 10px 22px rgba(16, 24, 40, .2);
}

.zb-dock .dock-item:hover,
.zb-dock .dock-item:focus-visible {
	transform: translateY(-6px) scale(1.09);
	box-shadow: 0 10px 22px rgba(16, 24, 40, .2);
	z-index: 2;
}
.zb-dock .dock-item:active { transform: translateY(-2px) scale(1.02); }
.zb-dock .dock-item:focus-visible {
	outline: 2px solid #ff5c7c;
	outline-offset: 2px;
}

.zb-dock .dock-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}
.zb-dock .dock-icon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}
.zb-dock .dock-icon svg {
	width: 52%;
	height: 52%;
}
.zb-dock .dock-icon:empty::before {
	content: "";
	width: 46%;
	height: 46%;
	border-radius: 30%;
	background: #ff5c7c;
	opacity: .85;
}

.zb-dock .dock-tip { display: none; }

.zb-dock-flytip {
	position: fixed;
	z-index: 901;
	transform: translate(-50%, -100%);
	padding: 5px 10px;
	background: rgba(31, 34, 38, .9);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.zb-dock-flytip.is-show { opacity: 1; }

.zb-dock.has-label .dock-item {
	width: auto;
	min-width: var(--dock-icon, 52px);
	height: auto;
	min-height: var(--dock-icon, 52px);
	padding: 7px 10px 8px;
}
.zb-dock.has-label .dock-item .dock-tip { display: none; }
.zb-dock .dock-label {
	max-width: 76px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6b7280;
}

.zb-dock-size-36 { --dock-icon: 36px; --dock-radius: 16px; }
.zb-dock-size-44 { --dock-icon: 44px; --dock-radius: 18px; }
.zb-dock-size-52 { --dock-icon: 52px; --dock-radius: 22px; }
.zb-dock-size-60 { --dock-icon: 60px; --dock-radius: 24px; }
.zb-dock-size-68 { --dock-icon: 68px; --dock-radius: 26px; }
.zb-dock-size-76 { --dock-icon: 76px; --dock-radius: 28px; }

.zb-dock-gap-4 { --dock-gap: 4px; }
.zb-dock-gap-8 { --dock-gap: 8px; }
.zb-dock-gap-12 { --dock-gap: 12px; }
.zb-dock-gap-16 { --dock-gap: 16px; }
.zb-dock-gap-20 { --dock-gap: 20px; }
.zb-dock-gap-28 { --dock-gap: 28px; }

.zb-toast {
	position: fixed;
	left: 50%;
	bottom: 108px;
	z-index: 1400;
	padding: 9px 20px;
	background: rgba(31, 34, 38, .92);
	color: #fff;
	font-size: 13px;
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(16, 24, 40, .18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: all .24s ease;
}
.zb-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.zb-gotop {
	position: fixed;
	right: 22px;
	bottom: var(--zb-gotop-bottom, 40px);
	z-index: 899;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(31, 34, 38, .12);
	border-radius: 50%;
	color: #6b7280;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.zb-gotop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zb-gotop:hover,
.zb-gotop:focus-visible {
	background: #ff5c7c;
	border-color: #ff5c7c;
	color: #fff;
}
.zb-gotop:focus-visible {
	outline: 2px solid #ff5c7c;
	outline-offset: 2px;
}
.zb-gotop svg {
	width: 18px;
	height: 18px;

	margin-top: -1px;
}

.zb-post-act {

	--pa-like-1: #ffb9d2;
	--pa-like-2: #ff8db4;
	--pa-like-on-1: #ff6d9f;
	--pa-like-on-2: #f53f7c;
	--pa-fav-1: #ffe0a3;
	--pa-fav-2: #ffc266;
	--pa-fav-on-1: #ffc24d;
	--pa-fav-on-2: #f59600;

	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--zb-pa-bottom, 104px);
	z-index: 898;
	display: flex;
	justify-content: center;

	pointer-events: none;
	transition: opacity .22s ease;
}
.zb-post-act.is-left { justify-content: flex-start; padding-left: 24px; }
.zb-post-act.is-right { justify-content: flex-end; padding-right: 24px; }

.zb-pa-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 6px;
	pointer-events: auto;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
}

.zb-pa-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px 0 5px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #1f2226;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, opacity .2s ease;
}
.zb-pa-btn:hover { background: rgba(31, 34, 38, .06); }
.zb-pa-btn:focus-visible {
	outline: 2px solid #ff5c7c;
	outline-offset: 2px;
}

.zb-pa-btn.is-busy {
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

.zb-pa-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	transition: box-shadow .2s ease;
}
.zb-pa-like .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-like-1), var(--pa-like-2));
	box-shadow: 0 3px 10px rgba(255, 110, 160, .45);
}
.zb-pa-fav .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-fav-1), var(--pa-fav-2));
	box-shadow: 0 3px 10px rgba(255, 176, 60, .45);
}
.zb-pa-btn.is-on .zb-pa-ico {
	box-shadow: 0 4px 14px rgba(16, 24, 40, .22);
}
.zb-pa-like.is-on .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-like-on-1), var(--pa-like-on-2));
	box-shadow: 0 4px 14px rgba(245, 63, 124, .5);
}
.zb-pa-fav.is-on .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-fav-on-1), var(--pa-fav-on-2));
	box-shadow: 0 4px 14px rgba(245, 150, 0, .5);
}

.zb-pa-ico svg {
	width: 16px;
	height: 16px;
}
.zb-pa-ico svg path,
.zb-pa-ico svg polygon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.zb-pa-btn.is-on .zb-pa-ico svg path,
.zb-pa-btn.is-on .zb-pa-ico svg polygon {
	fill: currentColor;
	stroke-width: 0;
}

.zb-pa-label {
	white-space: nowrap;
}

@keyframes zb-pa-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.24); }
	68% { transform: scale(.94); }
	100% { transform: scale(1); }
}
.zb-pa-btn.is-bump .zb-pa-ico {
	animation: zb-pa-bump .46s cubic-bezier(.3, .9, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.zb-pa-btn.is-bump .zb-pa-ico { animation: none; }
}

@media (max-width: 768px) {
	.zb-dock { bottom: 12px; }
	.zb-dock-inner { max-width: calc(100vw - 20px); }

	/* 手机上不要单独的「回到顶部」圆钮：Dock 里已有回顶入口，这个挡视线 */
	.zb-gotop { display: none; }

	/* 触屏点完 Dock 图标，:hover 会一直粘着（没有鼠标移开事件），
	   导致图标上浮不回落 —— 手机端禁用上浮，只留一个轻微按压反馈 */
	.zb-dock .dock-item:hover,
	.zb-dock .dock-item:focus-visible {
		transform: none;
		box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	}
	.zb-dock .dock-item:active { transform: scale(.94); }
	.zb-dock .dock-item:focus-visible { outline: none; }

	.zb-post-act {
		left: auto;
		right: 8px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		justify-content: flex-end;
		padding: 0;
	}
	.zb-pa-inner {
		flex-direction: column;
		gap: 20px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.zb-pa-btn {
		position: relative;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
		background: none;
	}
	.zb-pa-btn:hover { background: none; }

	.zb-pa-like:not(.is-on) .zb-pa-ico,
	.zb-pa-fav:not(.is-on) .zb-pa-ico {
		background: none;
		box-shadow: none;
	}
	.zb-pa-like:not(.is-on) .zb-pa-ico svg path,
	.zb-pa-like:not(.is-on) .zb-pa-ico svg polygon,
	.zb-pa-fav:not(.is-on) .zb-pa-ico svg path,
	.zb-pa-fav:not(.is-on) .zb-pa-ico svg polygon {

		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
	}

	.zb-pa-label { display: none; }
	.zb-pa-ico {
		width: 46px;
		height: 46px;
		border: 2px solid rgba(255, 255, 255, .72);
	}
	.zb-pa-ico svg {
		width: 22px;
		height: 22px;
	}
	.zb-pa-ico svg path,
	.zb-pa-ico svg polygon { stroke-width: 1.9; }

	.zb-post-act.is-dim { opacity: .45; }
}

@media print {
	.zb-dock,
	.zb-post-act,
	.zb-gotop { display: none !important; }
}

body.zb-has-dock-gotop .back-top { display: none !important; }

[data-bs-theme="dark"] .zb-dock-inner {
	background: rgba(28, 31, 36, .8);
	border-color: rgba(255, 255, 255, .09);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}
[data-bs-theme="dark"] .zb-dock .dock-item {
	background: #262b32;
	color: #e8eaed;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .zb-dock .dock-item:hover,
[data-bs-theme="dark"] .zb-dock .dock-item:focus-visible {
	box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
}
[data-bs-theme="dark"] .zb-dock .dock-label { color: #9aa3af; }
[data-bs-theme="dark"] .zb-dock .dock-sep { background: rgba(255, 255, 255, .16); }
[data-bs-theme="dark"] .zb-dock-flytip { background: rgba(240, 242, 245, .94); color: #1b1e22; }

[data-bs-theme="dark"] .zb-gotop {
	background: #262b32;
	border-color: rgba(255, 255, 255, .1);
	color: #b9c0ca;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .zb-pa-inner {
	background: rgba(28, 31, 36, .84);
	border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .zb-pa-btn { color: #e8eaed; }
[data-bs-theme="dark"] .zb-pa-btn:hover { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .zb-toast { background: rgba(240, 242, 245, .94); color: #1b1e22; }