/* 一键收藏助手 — 前台样式。独立作用域，尽量不依赖宿主主题的任何类名/变量，方便装进任何站点。 */
/* ---------- 贴边标签（推荐的常驻入口样式）---------- */
/* 贴在屏幕边缘、垂直居中，不占用顶部或底部空间，不会跟任何主题的头部/底部导航栏冲突 */
.ocb-edge {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2147482900;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px 0 10px;
	border: 0;
	background: var(--ocb-accent, #111);
	color: #fff;
	font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	cursor: pointer;
	writing-mode: horizontal-tb;
	transition: padding .15s ease, box-shadow .15s ease;
}
.ocb-edge:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .24); }
.ocb-edge--right { right: 0; border-radius: 10px 0 0 10px; }
.ocb-edge--left { left: 0; border-radius: 0 10px 10px 0; }
.ocb-edge__text { white-space: nowrap; }
@media (max-width: 480px) {
	.ocb-edge { height: 36px; font-size: 11px; padding: 0 10px 0 9px; }
}

.ocb-fab {
	position: fixed;
	bottom: calc(var(--ocb-bottom, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 16px 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--ocb-accent, #111);
	color: #fff;
	font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ocb-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.ocb-fab:active { transform: translateY(0) scale(.97); }
.ocb-fab--right { right: 20px; }
.ocb-fab--left { left: 20px; }
.ocb-fab__icon { flex: none; display: block; }
.ocb-fab__text { white-space: nowrap; }
@media (max-width: 480px) {
	.ocb-fab { height: 40px; padding: 0 13px 0 11px; font-size: 12px; }
	.ocb-fab--right { right: 16px; }
	.ocb-fab--left { left: 16px; }
}

.ocb-modal {
	position: fixed; inset: 0; z-index: 2147483100;
	display: flex; align-items: flex-end; justify-content: center;
	font: 400 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ocb-modal[hidden] { display: none; }
.ocb-modal__mask { position: absolute; inset: 0; background: rgba(15, 15, 15, .45); animation: ocbFade .18s ease; }
.ocb-modal__sheet {
	position: relative; width: 100%; max-width: 420px;
	background: #fff; border-radius: 20px 20px 0 0; padding: 8px 22px 26px;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
	animation: ocbUp .22s ease;
	max-height: 86vh; overflow-y: auto;
	color: #111;
}
@media (min-width: 560px) {
	.ocb-modal { align-items: center; }
	.ocb-modal__sheet { border-radius: 20px; }
}
.ocb-modal__grab { display: flex; justify-content: center; padding: 8px 0 6px; }
.ocb-modal__grab::before { content: ""; width: 36px; height: 4px; border-radius: 4px; background: #e2e2e2; }
.ocb-modal__x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f3f3f3; color: #666; display: inline-flex; align-items: center; justify-content: center; }
.ocb-modal__x:hover { background: #e9e9e9; }
.ocb-modal__body { padding-top: 6px; }

.ocb-m-icon { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; margin-bottom: 14px; }
.ocb-m-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.ocb-m-desc { color: #666; margin: 0 0 18px; }
.ocb-m-primary {
	display: block; width: 100%; height: 46px; border: 0; border-radius: 12px;
	background: var(--ocb-accent, #111); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ocb-m-primary:hover { opacity: .92; }
.ocb-m-steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ocb; }
.ocb-m-steps li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid #f0f0f0; counter-increment: ocb; }
.ocb-m-steps li:last-child { border-bottom: 0; }
.ocb-m-steps li::before {
	content: counter(ocb); position: absolute; left: 0; top: 9px;
	width: 22px; height: 22px; border-radius: 50%; background: var(--ocb-accent, #111); color: #fff;
	font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ocb-m-link { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 11px 14px; background: #f6f6f6; border-radius: 10px; }
.ocb-m-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; font-size: 12px; }
.ocb-m-link button { flex: none; border: 0; background: var(--ocb-accent, #111); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 8px; }
.ocb-m-close {
	display: block; width: 100%; height: 44px; margin-top: 10px; border: 1px solid #e5e5e5; border-radius: 12px;
	background: #fff; color: #333; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ocb-m-close:hover { background: #f7f7f7; }

/* ---------- 顶部横幅（自动提醒用）---------- */
.ocb-banner {
	position: fixed; top: 0; left: 0; right: 0; z-index: 2147483050;
	background: #fff; border-bottom: 1px solid #eee;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
	transform: translateY(-100%);
	transition: transform .32s cubic-bezier(.2, .8, .2, 1);
	font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	color: #111;
}
.ocb-banner[hidden] { display: block; visibility: hidden; }
.ocb-banner.is-on { transform: translateY(0); }
.ocb-banner.is-on[hidden] { visibility: visible; }
.ocb-banner__in {
	max-width: 960px; margin: 0 auto;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 44px 10px 14px;
	min-height: 56px;
	position: relative;
}
.ocb-banner__icon {
	flex: none; width: 34px; height: 34px; border-radius: 9px;
	background: var(--ocb-accent, #111); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ocb-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ocb-banner__text strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocb-banner__text span { font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocb-banner__cta {
	flex: none; height: 32px; padding: 0 16px; border: 0; border-radius: 8px;
	background: var(--ocb-accent, #111); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ocb-banner__cta:hover { opacity: .9; }
.ocb-banner__x {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px; border: 0; border-radius: 50%; background: #f2f2f2; color: #888;
	display: inline-flex; align-items: center; justify-content: center;
}
.ocb-banner__x:hover { background: #e7e7e7; }
@media (max-width: 480px) {
	.ocb-banner__in { padding: 9px 40px 9px 12px; gap: 9px; min-height: 50px; }
	.ocb-banner__icon { width: 30px; height: 30px; border-radius: 8px; }
	.ocb-banner__text strong { font-size: 12px; }
	.ocb-banner__text span { font-size: 10px; }
	.ocb-banner__cta { height: 28px; padding: 0 12px; font-size: 11px; }
}

.ocb-toast {
	position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
	z-index: 2147483200; background: #111; color: #fff; font-size: 13px; font-weight: 600;
	padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ocb-toast.is-on { opacity: 1; }

@keyframes ocbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ocbUp { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ocb-fab, .ocb-modal__mask, .ocb-modal__sheet { animation: none !important; transition: none !important; }
}