/* 会员等级 — 1:1 参考 https://wwnoxrhlpvbk4.ok.kimi.link/membership 深色主题 */
:root {
	--hy-bg: #08070b;
	--hy-muted: #8e8e9a;
	--hy-muted-light: #b8b8c4;
	--hy-card: rgba(28, 28, 38, 0.92);
	--hy-card-solid: #1c1c26;
	--theme-primary: #d4a843;
	--theme-accent: #f0c850;
	--theme-glow: rgba(212, 168, 67, 0.15);
	--hy-angle: 0deg;
}

[data-tier="silver"] {
	--theme-primary: #b8b8c8;
	--theme-accent: #d0d0dc;
	--theme-glow: rgba(184, 184, 200, 0.15);
}

[data-tier="gold"] {
	--theme-primary: #d4a843;
	--theme-accent: #f0c850;
	--theme-glow: rgba(212, 168, 67, 0.15);
}

[data-tier="diamond"] {
	--theme-primary: #7dd3e8;
	--theme-accent: #a8e8f5;
	--theme-glow: rgba(125, 211, 232, 0.15);
}

[data-tier="platinum"] {
	--theme-primary: #d4d4d8;
	--theme-accent: #e8e8ec;
	--theme-glow: rgba(212, 212, 216, 0.15);
}

[data-tier="black"] {
	--theme-primary: #d4af37;
	--theme-accent: #f5d76e;
	--theme-glow: rgba(212, 175, 55, 0.15);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	min-height: 100dvh;
	font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	background: var(--hy-bg);
	color: #fff;
}

html {
	scrollbar-width: none;
}

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

.hy-page {
	min-height: 100dvh;
	max-width: 430px;
	margin: 0 auto;
	position: relative;
	padding-bottom: calc(120px + env(safe-area-inset-bottom, 0));
	background: var(--hy-bg);
}

.glass-nav {
	background: rgba(8, 7, 11, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* ── 顶栏 + Tab ── */
.hy-sticky-head {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: env(safe-area-inset-top, 0);
}

.hy-head-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px 8px;
	position: relative;
}

.hy-back-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	padding: 0;
}

.hy-back-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hy-head-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.01em;
}

.hy-head-spacer {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.hy-tier-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow-x: auto;
	padding: 0 12px 12px;
	scrollbar-width: none;
}

.hy-tier-tabs::-webkit-scrollbar {
	display: none;
}

.hy-tier-tab {
	flex-shrink: 0;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--hy-muted);
	cursor: pointer;
	font-family: inherit;
	transition: all 0.25s ease;
}

.hy-tier-tab:hover {
	color: var(--hy-muted-light);
}

.hy-tier-tab.active {
	background: var(--theme-glow);
	border-color: var(--theme-primary);
	color: #fff;
}

/* ── Hero ── */
.hy-hero-panel {
	position: relative;
	padding: 20px 16px 16px;
	overflow: hidden;
}

.hy-hero-texture {
	position: absolute;
	inset: 0;
	background: url("../img/member/bg-texture.jpg") center/cover no-repeat;
	opacity: 0.2;
	pointer-events: none;
}

.hy-hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--hy-bg) 0%, transparent 40%, var(--hy-bg) 100%);
	pointer-events: none;
}

.hy-hero-body {
	position: relative;
	z-index: 1;
}

.hy-hero-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.hy-hero-main {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.hy-hero-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.hy-hero-name-row h2 {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.tier-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	background: var(--theme-glow);
	color: var(--theme-accent);
	border: 1px solid color-mix(in srgb, var(--theme-primary) 30%, transparent);
}

.hy-hero-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 4px;
}

.tier-shimmer {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(
		90deg,
		var(--theme-primary) 0%,
		var(--theme-accent) 25%,
		#fff 50%,
		var(--theme-accent) 75%,
		var(--theme-primary) 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hy-shimmer 3s linear infinite;
}

.hy-hero-price .unit {
	font-size: 13px;
	color: var(--hy-muted-light);
}

.hy-hero-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.hy-hero-promo .orig {
	font-size: 11px;
	color: var(--hy-muted);
	text-decoration: line-through;
}

.hy-hero-promo .save {
	font-size: 10px;
	color: #22c55e;
	background: rgba(34, 197, 94, 0.1);
	padding: 2px 6px;
	border-radius: 999px;
}

.hy-hero-validity {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--hy-muted-light);
	margin-bottom: 10px;
}

.hy-hero-perks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hy-hero-perks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.82);
	list-style: none;
}

.hy-hero-perks svg {
	flex-shrink: 0;
	color: var(--theme-primary);
}

.hy-hero-icon {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	margin-left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hy-hero-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hy-hero-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hy-hero-daily {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--hy-muted-light);
}

.hy-hero-daily .line {
	width: 16px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--theme-primary));
}

.hy-hero-daily .line.r {
	background: linear-gradient(to left, transparent, var(--theme-primary));
}

.hy-hero-compare {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	color: var(--theme-primary);
	background: var(--theme-glow);
	transition: opacity 0.2s;
}

.hy-divider-star {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 32px 16px;
}

.hy-divider-star .line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, color-mix(in srgb, var(--theme-primary) 40%, transparent));
}

.hy-divider-star .line.r {
	background: linear-gradient(to left, transparent, color-mix(in srgb, var(--theme-primary) 40%, transparent));
}

.hy-divider-star svg {
	width: 12px;
	height: 12px;
	fill: var(--theme-primary);
}

/* ── 区块 ── */
.hy-section {
	padding: 0 16px 20px;
}

.hy-sec-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.hy-sec-hd.center {
	justify-content: center;
}

.hy-section-bar {
	width: 4px;
	height: 16px;
	border-radius: 999px;
	background: var(--theme-primary);
	flex-shrink: 0;
}

.hy-sec-hd h2 {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.hy-sec-badge {
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
	color: var(--theme-accent);
	background: color-mix(in srgb, var(--theme-primary) 15%, transparent);
}

.hy-star-ico {
	fill: var(--theme-primary);
	opacity: 0.5;
	flex-shrink: 0;
}

.hy-sec-sub {
	font-size: 10px;
	color: var(--hy-muted);
	margin: -8px 0 12px 12px;
}

/* ── 核心权益 ── */
.hy-ben-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.hy-tier-border {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 1.5px;
	border-radius: 16px;
	background: conic-gradient(
		from var(--hy-angle),
		transparent 0%,
		var(--theme-primary) 15%,
		var(--theme-accent) 25%,
		transparent 40%
	);
	animation: hy-rotate-border 5s linear infinite;
}

.hy-tier-border .inner {
	position: relative;
	z-index: 1;
	background: #22222e;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14.5px;
	padding: 14px;
	height: 100%;
}

.hy-ben-tag {
	display: inline-block;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 500;
	border-radius: 999px;
	margin-bottom: 8px;
	color: var(--theme-primary);
	background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--theme-primary) 20%, transparent);
}

.hy-ben-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.hy-ben-ico {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
	color: var(--theme-primary);
}

.hy-ben-ico svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.hy-ben-title {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.35;
	margin-bottom: 4px;
}

.hy-ben-desc {
	font-size: 10px;
	color: var(--hy-muted-light);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── 模块额度 ── */
.hy-quota-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hy-quota-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(28, 28, 38, 0.85);
}

.hy-quota-item.disabled {
	background: rgba(24, 24, 32, 0.7);
	border-color: rgba(255, 255, 255, 0.06);
}

.hy-quota-item .name {
	width: 72px;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}

.hy-quota-item.disabled .name {
	color: var(--hy-muted-light);
}

.hy-quota-bar {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.hy-quota-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
	transition: width 0.5s ease;
}

.hy-quota-fill.green {
	background: linear-gradient(90deg, #22c55e, #4ade80);
}

.hy-quota-val {
	width: 48px;
	flex-shrink: 0;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	color: var(--theme-primary);
}

.hy-quota-item.disabled .hy-quota-val {
	color: var(--hy-muted-light);
}

.hy-quota-val.unlimited {
	color: #22c55e;
}

/* ── 会员权益网格 ── */
.hy-svc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.hy-svc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 12px 6px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(32, 32, 42, 0.95);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.hy-svc-item.locked {
	background: rgba(26, 26, 34, 0.88);
	border-color: rgba(255, 255, 255, 0.08);
	opacity: 1;
	filter: none;
}

.hy-svc-ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	background: color-mix(in srgb, var(--theme-primary) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--theme-primary) 35%, transparent);
	color: var(--theme-accent);
}

.hy-svc-item.locked .hy-svc-ico {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	color: #a8a8b4;
}

.hy-svc-ico svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.hy-svc-item .name {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
}

.hy-svc-item.locked .name {
	color: #c8c8d4;
}

.hy-svc-item .desc {
	font-size: 9px;
	color: var(--hy-muted-light);
	margin-top: 2px;
}

.hy-svc-item.locked .desc {
	color: var(--hy-muted);
}

/* ── 专家服务 ── */
.hy-expert-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hy-expert-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(32, 32, 42, 0.92);
}

.hy-expert-item.locked {
	background: rgba(26, 26, 34, 0.88);
	border-color: rgba(255, 255, 255, 0.07);
	opacity: 1;
}

.hy-expert-ico {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--theme-primary) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--theme-primary) 32%, transparent);
	color: var(--theme-accent);
}

.hy-expert-item.locked .hy-expert-ico {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	color: #a8a8b4;
}

.hy-expert-ico svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.hy-expert-body {
	flex: 1;
	min-width: 0;
}

.hy-expert-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
	flex-wrap: wrap;
}

.hy-expert-title-row h3 {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.hy-expert-item.locked .hy-expert-title-row h3 {
	color: #d0d0dc;
}

.hy-expert-unlock {
	font-size: 9px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.hy-expert-desc {
	font-size: 12px;
	line-height: 1.55;
	color: var(--hy-muted-light);
}

.hy-expert-item.locked .hy-expert-desc {
	color: var(--hy-muted);
}

/* ── 底部 CTA ── */
.hy-bottom-spacer {
	height: 100px;
}

.hy-bottom-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.hy-bottom-inner {
	max-width: 430px;
	margin: 0 auto;
	padding: 12px 16px;
}

.hy-bottom-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hy-bottom-price .top {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.hy-bottom-price .sym {
	font-size: 11px;
	color: var(--hy-muted);
}

.hy-bottom-price .num {
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.hy-bottom-price .unit {
	font-size: 11px;
	color: var(--hy-muted);
}

.hy-bottom-price .sub {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

.hy-bottom-price .sub .orig {
	font-size: 10px;
	color: var(--hy-muted);
	text-decoration: line-through;
}

.hy-bottom-price .sub .save {
	font-size: 10px;
	padding: 1px 4px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}

.tier-cta-btn {
	flex: 1;
	height: 46px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
	color: var(--hy-bg);
	box-shadow: none;
	transition: transform 0.15s ease;
}

.tier-cta-btn:active {
	transform: scale(0.96);
}

.tier-cta-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.tier-cta-btn.btn-activated {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.hy-bottom-agree {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.hy-agree-check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--hy-muted);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: all 0.2s;
}

.hy-agree-check.on {
	background: #f59e0b;
	border-color: transparent;
}

.hy-agree-check svg {
	width: 10px;
	height: 10px;
	stroke: var(--hy-bg);
	fill: none;
	stroke-width: 3;
	opacity: 0;
}

.hy-agree-check.on svg {
	opacity: 1;
}

.hy-bottom-agree span {
	font-size: 11px;
	color: var(--hy-muted);
}

.hy-bottom-agree a {
	color: var(--hy-muted-light);
	text-decoration: none;
}

@keyframes hy-shimmer {
	0% {
		background-position: 200% center;
	}
	100% {
		background-position: -200% center;
	}
}

@keyframes hy-rotate-border {
	to {
		--hy-angle: 360deg;
	}
}

@property --hy-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}