/**
 * IPI 设备绑定卡片。设计语言沿用站点令牌（--ipi-grad-main / 紫系），不另起一套。
 */

.ipi-bind {
	--ipi-text: #ECE9FB;
	--ipi-muted: #A99FC6;
	--ipi-dim: #6F6489;
	--ipi-primary: #8B5CF6;
	--ipi-accent: #E879F9;
	--ipi-line: rgba(168, 85, 247, .18);
	--ipi-line-strong: rgba(168, 85, 247, .45);
	--ipi-panel: rgba(255, 255, 255, .035);
	--ipi-grad: linear-gradient(120deg, #8B5CF6 0%, #A855F7 40%, #E879F9 100%);
	--ipi-r: 18px;

	color: var(--ipi-text);
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

.ipi-bind__head { margin-bottom: 24px; padding-top: 6px; }

.ipi-bind__kicker {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ipi-accent);
	border: 1px solid var(--ipi-line-strong);
	border-radius: 999px;
	padding: 4px 12px;
	margin-bottom: 14px;
}

.ipi-bind__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.02em;
	background: var(--ipi-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ipi-bind__intro {
	margin: 0 0 10px;
	max-width: 62ch;
	color: var(--ipi-muted);
	font-size: 15px;
	line-height: 1.65;
}

.ipi-bind__note {
	margin: 0;
	max-width: 62ch;
	color: var(--ipi-dim);
	font-size: 13px;
	line-height: 1.6;
}

/* 状态条 */
.ipi-bind__status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 12px 16px;
	border: 1px solid var(--ipi-line);
	border-radius: 12px;
	background: var(--ipi-panel);
	font-size: 14px;
	color: var(--ipi-muted);
}

.ipi-bind__status[data-kind="ok"] { border-color: rgba(52, 211, 153, .45); color: #A7F3D0; }
.ipi-bind__status[data-kind="err"] { border-color: rgba(248, 113, 113, .45); color: #FECACA; }

.ipi-bind__status-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--ipi-accent);
	flex: 0 0 auto;
}

.ipi-bind__status[data-kind="wait"] .ipi-bind__status-dot { animation: ipi-bind-pulse 1.1s ease-in-out infinite; }
.ipi-bind__status[data-kind="ok"] .ipi-bind__status-dot { background: #34D399; }
.ipi-bind__status[data-kind="err"] .ipi-bind__status-dot { background: #F87171; }

@keyframes ipi-bind-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.9); opacity: .35; }
}

/* 分组 */
.ipi-bind__group { margin-bottom: 34px; }

.ipi-bind__group-title {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 16px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ipi-muted);
	font-weight: 600;
}

.ipi-bind__count {
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--ipi-line);
	color: var(--ipi-dim);
	letter-spacing: 0;
}

/* 网格 */
.ipi-bind__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

/* 卡片 */
.ipi-bind-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ipi-line);
	border-radius: var(--ipi-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	overflow: hidden;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}

.ipi-bind-card:hover {
	border-color: var(--ipi-line-strong);
	transform: translateY(-3px);
	box-shadow: 0 22px 50px -30px rgba(168, 85, 247, .9);
}

.ipi-bind-card--found { border-color: rgba(52, 211, 153, .5); }

/* 同系列命中但认不出具体型号（姐妹款共用 vid+pid+usagePage） */
.ipi-bind-card--near { border-color: rgba(168, 85, 247, .42); border-style: dashed; }
.ipi-bind-card--near::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(90% 60% at 50% 100%, rgba(139, 92, 246, .14), transparent 70%);
}

.ipi-bind-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .18), transparent 65%), rgba(11, 6, 22, .7);
	padding: 12px;
}

.ipi-bind-card__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}

.ipi-bind-card:hover .ipi-bind-card__media img { transform: scale(1.05); }

.ipi-bind-card__ph { color: var(--ipi-dim); font-size: 13px; }

.ipi-bind-card__found {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(52, 211, 153, .16);
	border: 1px solid rgba(52, 211, 153, .5);
	color: #A7F3D0;
}

.ipi-bind-card__body { padding: 14px 14px 6px; flex: 1 1 auto; }

.ipi-bind-card__name,
.ipi-bind .ipi-bind-card__name {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--ipi-text) !important;
}

.ipi-bind-card__meta {
	display: flex; flex-wrap: wrap; gap: 6px;
	min-height: 24px;
	font-size: 11px;
	color: var(--ipi-dim);
}

.ipi-bind-card__meta code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ipi-line);
	color: var(--ipi-muted);
}

.ipi-bind-card__meta em {
	font-style: normal;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(139, 92, 246, .12);
	color: var(--ipi-muted);
}

/* 按钮 */
.ipi-bind-card__btn {
	margin: auto 14px 14px;
	width: calc(100% - 28px);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--ipi-grad);
	color: #0B0616;
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: .01em;
	cursor: pointer;
	transition: filter .2s, transform .2s, box-shadow .2s;
	box-shadow: 0 10px 28px -14px rgba(232, 121, 249, .85);
}

.ipi-bind-card__btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.ipi-bind-card__btn:active:not(:disabled) { transform: translateY(0); }
.ipi-bind-card__btn:disabled { opacity: .5; cursor: progress; }
.ipi-bind-card__btn svg { transition: transform .2s; }
.ipi-bind-card__btn:hover:not(:disabled) svg { transform: translateX(3px); }

.ipi-bind-card__btn:focus-visible { outline: 2px solid var(--ipi-accent); outline-offset: 3px; }

/* 语言提示 */
.ipi-bind__lang-hint {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 6px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--ipi-line);
	color: var(--ipi-dim);
	font-size: 12.5px;
	line-height: 1.6;
	max-width: 70ch;
}

.ipi-bind__lang-hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--ipi-muted); }

@media (max-width: 640px) {
	.ipi-bind__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.ipi-bind-card__btn { font-size: 12.5px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ipi-bind-card, .ipi-bind-card__media img, .ipi-bind-card__btn { transition: none; }
	.ipi-bind__status[data-kind="wait"] .ipi-bind__status-dot { animation: none; }
}

[dir="rtl"] .ipi-bind-card__btn svg { transform: scaleX(-1); }