/* =========================================================
   Account — Sign In / Register / Wishlist
   设计真值全部来自 assets/css/tokens.css（红 #DA2735 · 冷灰 · Montserrat）
   ========================================================= */

/* ---------- 头部：登录态与收藏角标 ---------- */
.hdr-ic[hidden] { display: none !important; }

.hdr-ic__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
	border-radius: var(--r-pill);
	background: var(--c-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.hdr-ic__count[hidden] { display: none !important; }

/* 已登录时头部的名字过长要截断 */
.hdr-ic .hdr-ic__name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- 商品卡上的收藏按钮 ---------- */
.catalog-card__wish {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: #fff;
	color: var(--c-n-400);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.catalog-card__wish:hover {
	color: var(--c-brand);
	border-color: var(--c-brand);
}

.catalog-card__wish.is-active {
	background: var(--c-brand-soft);
	border-color: var(--c-brand);
	color: var(--c-brand);
}

.catalog-card__wish.is-active svg {
	fill: currentColor;
}

.catalog-card__wish[disabled] {
	opacity: .55;
	cursor: default;
}

/* 单品页的收藏按钮 */
.btn--wish {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn--wish.is-active {
	border-color: var(--c-brand);
	color: var(--c-brand-dark);
	background: var(--c-brand-soft);
}

.btn--wish.is-active svg {
	fill: currentColor;
}

/* ---------- 账户页通用 ---------- */
.account-shell {
	max-width: 820px;
	margin: 0 auto 64px;
	padding-top: 4px;
}

.account-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--c-line);
}

.account-tab {
	padding: 12px 18px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--c-text-soft);
	font-size: var(--fs-md);
	font-weight: 700;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.account-tab:hover { color: var(--c-text); }

.account-tab.is-active {
	color: var(--c-brand-dark);
	border-bottom-color: var(--c-brand);
}

.account-panel { display: none; }
.account-panel.is-active { display: block; }

.account-form {
	max-width: 640px;
	margin: 0 auto;
	padding: 26px 28px 28px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
}

.account-field { margin: 0 0 14px; }

.account-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.account-field .req { color: var(--c-brand); margin-inline-start: 2px; }

.account-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--c-n-200);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--text);
	font-family: inherit;
	font-size: var(--fs-base);
}

.account-field input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(218, 39, 53, .1);
}

.account-field input:disabled {
	background: var(--c-surface-alt);
	color: var(--c-text-soft);
}

.account-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.account-check { margin: 0 0 16px; }

.account-check label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.account-check input { width: 15px; height: 15px; accent-color: var(--c-brand); }

.account-hint {
	margin: 0 0 14px;
	color: var(--c-text-soft);
	font-size: var(--fs-xs);
}

/* 蜜罐：移出视口而非 display:none，机器人仍会填，真人看不到 */
.account-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.account-turnstile {
	margin: 4px 0 14px;
	min-height: 65px; /* 预留高度，避免加载时表单跳动 */
}

.account-details {
	margin: 4px 0 16px;
	padding: 12px 14px;
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-md);
}

.account-details summary {
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.account-details summary::marker { color: var(--c-text-soft); }

.account-details > .account-field:first-of-type { margin-top: 14px; }

.account-submit { width: 100%; margin-top: 8px; }

/* 主题的 .btn--outline 只描边不设底色，原生按钮灰底会透出来 */
.account-form .btn--outline,
.btn--wish {
	background: #fff;
}

.account-skip { margin-top: 10px; }

.account-alt {
	margin: 16px 0 0;
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
	text-align: center;
}

.account-link {
	border: none;
	background: none;
	padding: 0;
	color: var(--c-brand-dark);
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

.account-link:hover { text-decoration: underline; }

.account-link--muted { color: var(--c-text-muted); }

.account-links {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin: 22px 0 0;
	font-size: var(--fs-sm);
}

.account-feedback {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	font-size: var(--fs-base);
	text-align: center;
}

.account-feedback--error {
	background: #fdecea;
	color: #b71c1c;
}

.account-feedback--success {
	background: #e8f5e9;
	color: #1b5e20;
}

.account-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 24px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: #fff;
	text-align: center;
}

.account-empty p {
	margin: 0 0 18px;
	color: var(--c-text-soft);
	font-size: var(--fs-md);
}

.account-note {
	max-width: 640px;
	margin: 20px auto 0;
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
	text-align: center;
}

/* 收藏页：JS 移除卡片后若为空则显示空态 */
.account-shell .catalog-grid { margin-bottom: 8px; }

/* ---------- 轻量提示 ---------- */
.ew-toast {
	position: fixed;
	inset-inline: 0;
	bottom: 28px;
	z-index: 9999;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.ew-toast__inner {
	padding: 10px 18px;
	border-radius: var(--r-pill);
	background: var(--c-n-800);
	color: #fff;
	font-size: var(--fs-sm);
	box-shadow: var(--sh-lg);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
}

.ew-toast.is-visible .ew-toast__inner {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- 移动端 ---------- */
.mobile-nav-account {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
}

.mobile-nav-account__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 2px;
	color: var(--c-text-muted);
	font-size: var(--fs-md);
	font-weight: 600;
}

.mobile-nav-account__link:hover { color: var(--c-brand-dark); }

@media (max-width: 600px) {
	.account-form { padding: 20px 18px 22px; }
	.account-field-row { grid-template-columns: 1fr; gap: 0; }
	.account-tab { flex: 1; padding: 12px 8px; }
}