/*
 * OneNav 网址角标 Pro - 前台样式
 * 选择器均以 oncb- 为前缀，避免覆盖 OneNav 原生样式。
 */

.oncb-card {
	position: relative !important;
	isolation: isolate;
	--oncb-bg: linear-gradient(135deg, #ff7a45, #ff3d71);
	--oncb-bg1: #ff7a45;
	--oncb-bg2: #ff3d71;
	--oncb-text: #fff;
	--oncb-font-size: 11px;
	--oncb-font-weight: 700;
	--oncb-letter-space: 0px;
	--oncb-pad-x: 10px;
	--oncb-pad-y: 4px;
	--oncb-radius: 4px;
	--oncb-rotation: 0deg;
	--oncb-offset-x: 0px;
	--oncb-offset-y: 0px;
	--oncb-opacity: 1;
	--oncb-mobile-scale: .85;
	--oncb-border-color: #ff7a45;
	--oncb-border-hover: #ff3d71;
	--oncb-border-width: 1px;
	--oncb-border-style: solid;
	--oncb-border-radius: 12px;
	--oncb-border-glow: 0px;
	--oncb-border-shadow: 0px;
}


/*
 * 1.0.1：角标使用独立裁剪层。
 * OneNav 的 .sites-item 是实际卡片外框；只裁剪角标层，不修改卡片本身 overflow，
 * 因此不会影响直达按钮、悬浮提示、链接点击或网格布局。
 */
.oncb-badge-clip {
	position: absolute;
	inset: 0;
	z-index: 30;
	overflow: hidden;
	border-radius: var(--oncb-border-radius, 12px);
	pointer-events: none;
	isolation: isolate;
}

.oncb-badge-clip > .oncb-badge {
	z-index: 1;
}

/* 小尺寸网址卡片自动缩小角标，避免过多遮挡 Logo 和标题。 */
.oncb-card-compact .oncb-style-ribbon {
	width: 64px;
	max-width: 64px;
	font-size: min(var(--oncb-font-size), 10px);
}

.oncb-card-compact .oncb-style-ribbon.oncb-pos-top-left {
	top: calc(5px + var(--oncb-offset-y));
	left: calc(-20px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-ribbon.oncb-pos-top-right {
	top: calc(5px + var(--oncb-offset-y));
	right: calc(-20px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-ribbon.oncb-pos-bottom-left {
	bottom: calc(5px + var(--oncb-offset-y));
	left: calc(-20px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-ribbon.oncb-pos-bottom-right {
	right: calc(-20px + var(--oncb-offset-x));
	bottom: calc(5px + var(--oncb-offset-y));
}

.oncb-card-compact .oncb-style-diagonal {
	width: 88px;
	max-width: 88px;
	font-size: min(var(--oncb-font-size), 10px);
}

.oncb-card-compact .oncb-style-diagonal.oncb-pos-top-left {
	top: calc(9px + var(--oncb-offset-y));
	left: calc(-28px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-diagonal.oncb-pos-top-right {
	top: calc(9px + var(--oncb-offset-y));
	right: calc(-28px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-diagonal.oncb-pos-bottom-left {
	bottom: calc(9px + var(--oncb-offset-y));
	left: calc(-28px + var(--oncb-offset-x));
}

.oncb-card-compact .oncb-style-diagonal.oncb-pos-bottom-right {
	right: calc(-28px + var(--oncb-offset-x));
	bottom: calc(9px + var(--oncb-offset-y));
}

.oncb-card-compact .oncb-style-pill,
.oncb-card-compact .oncb-style-flag {
	max-width: 88px;
}

/* 三角和折角必须真正贴住卡片四角，而不是在卡片内再留 6px。 */
.oncb-style-corner.oncb-pos-top-left,
.oncb-style-fold.oncb-pos-top-left {
	top: var(--oncb-offset-y);
	left: var(--oncb-offset-x);
}

.oncb-style-corner.oncb-pos-top-right,
.oncb-style-fold.oncb-pos-top-right {
	top: var(--oncb-offset-y);
	right: var(--oncb-offset-x);
}

.oncb-style-corner.oncb-pos-bottom-left,
.oncb-style-fold.oncb-pos-bottom-left {
	bottom: var(--oncb-offset-y);
	left: var(--oncb-offset-x);
}

.oncb-style-corner.oncb-pos-bottom-right,
.oncb-style-fold.oncb-pos-bottom-right {
	right: var(--oncb-offset-x);
	bottom: var(--oncb-offset-y);
}

/* 紧凑卡片中的三角/折角稍微缩小。 */
.oncb-card-compact .oncb-style-corner,
.oncb-card-compact .oncb-style-fold {
	width: 50px;
	height: 50px;
}

.oncb-card-compact .oncb-style-circle {
	width: 40px;
	height: 40px;
	max-width: 40px;
	min-height: 40px;
}

/* 描边使用覆盖层，不参与盒模型，不会导致卡片尺寸变化。 */
.oncb-card.oncb-has-border::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	border: var(--oncb-border-width) var(--oncb-border-style) var(--oncb-border-color);
	border-radius: var(--oncb-border-radius);
	box-shadow:
		0 0 var(--oncb-border-glow) color-mix(in srgb, var(--oncb-border-color) 55%, transparent),
		0 calc(var(--oncb-border-shadow) * .3) var(--oncb-border-shadow) color-mix(in srgb, var(--oncb-border-color) 24%, transparent);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.oncb-card.oncb-has-border:hover::after {
	border-color: var(--oncb-border-hover);
	box-shadow:
		0 0 calc(var(--oncb-border-glow) + 2px) color-mix(in srgb, var(--oncb-border-hover) 65%, transparent),
		0 calc(var(--oncb-border-shadow) * .35) calc(var(--oncb-border-shadow) + 2px) color-mix(in srgb, var(--oncb-border-hover) 28%, transparent);
}

.oncb-badge {
	position: absolute;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	max-width: 130px;
	min-height: 18px;
	padding: var(--oncb-pad-y) var(--oncb-pad-x);
	border-radius: var(--oncb-radius);
	background: var(--oncb-bg);
	color: var(--oncb-text) !important;
	font-size: var(--oncb-font-size);
	font-weight: var(--oncb-font-weight);
	line-height: 1.1;
	letter-spacing: var(--oncb-letter-space);
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	opacity: var(--oncb-opacity);
	pointer-events: none;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: center;
}

.oncb-badge.oncb-shadow {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--oncb-bg1) 42%, transparent);
}

.oncb-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.oncb-badge-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 通用四角定位 */
.oncb-pos-top-left {
	top: calc(6px + var(--oncb-offset-y));
	left: calc(6px + var(--oncb-offset-x));
}

.oncb-pos-top-right {
	top: calc(6px + var(--oncb-offset-y));
	right: calc(6px + var(--oncb-offset-x));
}

.oncb-pos-bottom-left {
	bottom: calc(6px + var(--oncb-offset-y));
	left: calc(6px + var(--oncb-offset-x));
}

.oncb-pos-bottom-right {
	right: calc(6px + var(--oncb-offset-x));
	bottom: calc(6px + var(--oncb-offset-y));
}

/* 截图同款斜角丝带 */
.oncb-style-ribbon {
	width: 74px;
	max-width: 74px;
	min-height: 18px;
	padding: 3px 4px;
	border-radius: 2px;
	font-size: min(var(--oncb-font-size), 11px);
}

.oncb-style-ribbon.oncb-pos-top-left {
	top: calc(7px + var(--oncb-offset-y));
	left: calc(-23px + var(--oncb-offset-x));
	transform: rotate(calc(-45deg + var(--oncb-rotation)));
}

.oncb-style-ribbon.oncb-pos-top-right {
	top: calc(7px + var(--oncb-offset-y));
	right: calc(-23px + var(--oncb-offset-x));
	transform: rotate(calc(45deg + var(--oncb-rotation)));
}

.oncb-style-ribbon.oncb-pos-bottom-left {
	bottom: calc(7px + var(--oncb-offset-y));
	left: calc(-23px + var(--oncb-offset-x));
	transform: rotate(calc(45deg + var(--oncb-rotation)));
}

.oncb-style-ribbon.oncb-pos-bottom-right {
	right: calc(-23px + var(--oncb-offset-x));
	bottom: calc(7px + var(--oncb-offset-y));
	transform: rotate(calc(-45deg + var(--oncb-rotation)));
}

/* 宽对角丝带 */
.oncb-style-diagonal {
	width: 105px;
	max-width: 105px;
	padding: 5px 8px;
	border-radius: 2px;
}

.oncb-style-diagonal.oncb-pos-top-left {
	top: calc(12px + var(--oncb-offset-y));
	left: calc(-32px + var(--oncb-offset-x));
	transform: rotate(calc(-45deg + var(--oncb-rotation)));
}

.oncb-style-diagonal.oncb-pos-top-right {
	top: calc(12px + var(--oncb-offset-y));
	right: calc(-32px + var(--oncb-offset-x));
	transform: rotate(calc(45deg + var(--oncb-rotation)));
}

.oncb-style-diagonal.oncb-pos-bottom-left {
	bottom: calc(12px + var(--oncb-offset-y));
	left: calc(-32px + var(--oncb-offset-x));
	transform: rotate(calc(45deg + var(--oncb-rotation)));
}

.oncb-style-diagonal.oncb-pos-bottom-right {
	right: calc(-32px + var(--oncb-offset-x));
	bottom: calc(12px + var(--oncb-offset-y));
	transform: rotate(calc(-45deg + var(--oncb-rotation)));
}

/* 三角角标 */
.oncb-style-corner {
	width: 58px;
	height: 58px;
	max-width: none;
	min-height: 0;
	padding: 6px;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	align-items: flex-start;
	justify-content: flex-start;
}

.oncb-style-corner .oncb-badge-inner {
	display: flex;
	align-items: center;
	gap: 2px;
	width: 43px;
	transform: rotate(-45deg) translate(-8px, 8px);
}

.oncb-style-corner.oncb-pos-top-right {
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.oncb-style-corner.oncb-pos-top-right .oncb-badge-inner {
	transform: rotate(45deg) translate(7px, 7px);
}
.oncb-style-corner.oncb-pos-bottom-left {
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.oncb-style-corner.oncb-pos-bottom-left .oncb-badge-inner {
	transform: rotate(45deg) translate(7px, 18px);
}
.oncb-style-corner.oncb-pos-bottom-right {
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.oncb-style-corner.oncb-pos-bottom-right .oncb-badge-inner {
	transform: rotate(-45deg) translate(-9px, 18px);
}

/* 圆角胶囊 */
.oncb-style-pill {
	border-radius: 999px;
	transform: rotate(var(--oncb-rotation));
}

/* 旗帜 */
.oncb-style-flag {
	border-radius: var(--oncb-radius) 0 0 var(--oncb-radius);
	padding-right: calc(var(--oncb-pad-x) + 8px);
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
	transform: rotate(var(--oncb-rotation));
}
.oncb-style-flag.oncb-pos-top-right,
.oncb-style-flag.oncb-pos-bottom-right {
	border-radius: 0 var(--oncb-radius) var(--oncb-radius) 0;
	padding-right: var(--oncb-pad-x);
	padding-left: calc(var(--oncb-pad-x) + 8px);
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}

/* 折角 */
.oncb-style-fold {
	width: 58px;
	height: 58px;
	max-width: none;
	min-height: 0;
	padding: 5px;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.oncb-style-fold::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: rgba(0, 0, 0, .18);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.oncb-style-fold.oncb-pos-top-right,
.oncb-style-fold.oncb-pos-bottom-right {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%, 0 72%);
}
.oncb-style-fold.oncb-pos-top-right::after,
.oncb-style-fold.oncb-pos-bottom-right::after {
	right: auto;
	left: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 圆形徽章 */
.oncb-style-circle {
	width: 46px;
	height: 46px;
	max-width: 46px;
	min-height: 46px;
	padding: 4px;
	border-radius: 50%;
	flex-direction: column;
	gap: 1px;
	transform: rotate(var(--oncb-rotation));
}
.oncb-style-circle .oncb-badge-text {
	max-width: 38px;
	font-size: .9em;
}

/* 动画 */
.oncb-anim-pulse {
	animation: oncbPulse 2.2s ease-in-out infinite;
}
.oncb-anim-float {
	animation: oncbFloat 2.8s ease-in-out infinite;
}
.oncb-anim-blink {
	animation: oncbBlink 2s ease-in-out infinite;
}
.oncb-anim-shine {
	overflow: hidden;
}
.oncb-anim-shine::before {
	content: "";
	position: absolute;
	inset: -50%;
	background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
	transform: translateX(-70%);
	animation: oncbShine 2.8s ease-in-out infinite;
}

@keyframes oncbPulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.12); }
}
@keyframes oncbFloat {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -3px; }
}
@keyframes oncbBlink {
	0%, 100% { opacity: var(--oncb-opacity); }
	50% { opacity: calc(var(--oncb-opacity) * .7); }
}
@keyframes oncbShine {
	0%, 45% { transform: translateX(-70%); }
	65%, 100% { transform: translateX(70%); }
}

/* OneNav big 卡片已有 overflow:hidden；确保角标层级高于背景层。 */
.oncb-card.style-sites-big > .oncb-badge-clip {
	z-index: 40;
}

@media (max-width: 767.98px) {
	.oncb-card.oncb-mobile-hidden > .oncb-badge-clip {
		display: none !important;
	}
	.oncb-card > .oncb-badge-clip > .oncb-badge {
		scale: var(--oncb-mobile-scale);
	}
	.oncb-card > .oncb-badge-clip > .oncb-pos-top-left,
	.oncb-card > .oncb-badge-clip > .oncb-pos-bottom-left {
		transform-origin: left center;
	}
	.oncb-card > .oncb-badge-clip > .oncb-pos-top-right,
	.oncb-card > .oncb-badge-clip > .oncb-pos-bottom-right {
		transform-origin: right center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oncb-badge,
	.oncb-badge::before,
	.oncb-card::after {
		animation: none !important;
		transition: none !important;
	}
}