/**
 * Native idol profile pages — /profile/{slug}/, /profiles/, /niche/{term}/.
 *
 * Loaded ONLY on those routes, and only while the `native_profiles` switch is
 * on (profiles.php swaps this in for the plugin's own profile stylesheet).
 * Everything reads the --sa-* token palette, so the pages follow whichever
 * Style preset the site runs. The --np-fx/--np-fy/--np-zoom avatar formula is
 * the same one every other theme avatar uses (hero, cards, typeahead), so a
 * face is cropped identically wherever it appears.
 */

/* ── Shared avatar (single hero + directory cards) ─────────────────────── */
.sa-prof-av {
	position: relative;
	display: block;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--sa-surface-2, #1C1526);
	box-shadow: 0 0 0 3px var(--sa-bg, #0F0B16), 0 0 0 5px var(--sa-heart, #FF3DAE);
}
.sa-prof-av--photo img {
	position: absolute;
	width: calc(var(--sa-focal-scale, 308%) * var(--np-zoom, 1));
	height: calc(var(--sa-focal-scale, 308%) * var(--np-zoom, 1));
	max-width: none;
	max-height: none;
	left: calc(var(--np-fx, .5) * (1 - 3.08 * var(--np-zoom, 1)) * 100%);
	top: calc(var(--np-fy, .4) * (1 - 3.08 * var(--np-zoom, 1)) * 100%);
	object-fit: cover;
	object-position: center 40%;
}
.sa-prof-av--txt {
	display: grid;
	place-items: center;
	font-family: var(--sa-font-display, inherit);
	font-size: 44px;
	font-weight: 800;
	color: var(--sa-text-muted, #8E8399);
}

/* ── Chips (hero + directory filter) ───────────────────────────────────── */
.sa-prof-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	border-radius: var(--sa-radius-pill, 999px);
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	background: var(--sa-surface-1, #171021);
	color: var(--sa-text-dim, #C9C1D4);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}
a.sa-prof-chip:hover { border-color: var(--sa-heart, #FF3DAE); color: var(--sa-text, #F4F0FA); }
.sa-prof-chip--fandom { border-color: transparent; background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)); color: var(--sa-on-accent, #fff); }
.sa-prof-chip.is-on { border-color: transparent; background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)); color: var(--sa-on-accent, #fff); }

/* ══ Single profile ═════════════════════════════════════════════════════ */
.sa-profile { padding-top: 26px; padding-bottom: 48px; }

.sa-prof-hero {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px 22px;
	align-items: center;
	padding: 26px 26px 22px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	background: var(--sa-surface-1, #171021);
	overflow: hidden;
	margin: 0 0 26px;
}
.sa-prof-hero__glow {
	position: absolute;
	inset: -60% -20% auto;
	height: 150%;
	background: radial-gradient(ellipse at 30% 0%, var(--sa-glow, rgba(255, 61, 174, .16)), transparent 60%);
	pointer-events: none;
}
.sa-prof-hero__meta { position: relative; min-width: 0; }
.sa-prof-hero__name {
	margin: 0 0 10px;
	font-family: var(--sa-font-display, inherit);
	font-size: clamp(26px, 4.5vw, 40px);
	line-height: 1.08;
	color: var(--sa-text, #F4F0FA);
	overflow-wrap: anywhere;
}
.sa-prof-hero__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 8px; }
.sa-prof-hero__rank { margin: 0; font-size: 13px; color: var(--sa-text-muted, #8E8399); }
.sa-prof-hero__rank a { color: var(--sa-heart, #FF3DAE); text-decoration: none; }
.sa-prof-hero__rank a:hover { text-decoration: underline; }

.sa-prof-stats {
	position: relative;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: 4px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
}
.sa-prof-stats li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-prof-stats strong {
	font-family: var(--sa-font-display, inherit);
	font-size: clamp(19px, 3vw, 26px);
	line-height: 1.1;
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-prof-stats span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-text-muted, #8E8399); }

/* Two-column body: content + facts rail. */
.sa-prof-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }

.sa-prof-sec { margin: 0 0 28px; }
.sa-prof-sec__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--sa-font-display, inherit);
	font-size: 20px;
	color: var(--sa-text, #F4F0FA);
}
.sa-prof-sec__count { font-size: 12.5px; font-weight: 600; color: var(--sa-text-muted, #8E8399); }

.sa-prof-bio { color: var(--sa-text-dim, #C9C1D4); max-width: 68ch; }

/* Vote history. */
.sa-prof-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-prof-hist__row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 15px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-sm, 10px);
	background: var(--sa-surface-1, #171021);
}
.sa-prof-hist__row.is-win { border-color: var(--sa-heart, #FF3DAE); }
.sa-prof-hist__rank {
	flex: 0 0 auto;
	min-width: 44px;
	text-align: center;
	font-family: var(--sa-font-display, inherit);
	font-size: 15px;
	font-weight: 800;
	color: var(--sa-text-muted, #8E8399);
	border-right: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	padding-right: 13px;
}
.sa-prof-hist__rank.is-first {
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-prof-hist__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sa-prof-hist__meta a { color: var(--sa-text, #F4F0FA); font-weight: 700; font-size: 14.5px; text-decoration: none; overflow-wrap: anywhere; }
.sa-prof-hist__meta a:hover { color: var(--sa-heart, #FF3DAE); }
.sa-prof-hist__meta em { font-style: normal; font-size: 12px; color: var(--sa-text-muted, #8E8399); }
.sa-prof-hist__tag {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--sa-radius-pill, 999px);
}
.sa-prof-hist__tag.is-live { background: var(--sa-surface-2, #1C1526); color: var(--sa-heart, #FF3DAE); border: 1px solid var(--sa-heart, #FF3DAE); }
.sa-prof-hist__tag.is-win { background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)); color: var(--sa-on-accent, #fff); }

/* Awards. */
.sa-prof-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sa-prof-award {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 15px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-sm, 10px);
	background: var(--sa-surface-1, #171021);
}
.sa-prof-award.is-daesang { border-image: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)) 1; border-style: solid; }
.sa-prof-award strong { font-size: 13.5px; color: var(--sa-text, #F4F0FA); }
.sa-prof-award em { font-style: normal; font-size: 11.5px; color: var(--sa-text-muted, #8E8399); }

/* Gallery. */
.sa-prof-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sa-prof-gallery a { display: block; border-radius: var(--sa-radius-sm, 10px); overflow: hidden; border: 1px solid var(--sa-border, rgba(255, 255, 255, .12)); }
.sa-prof-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .25s ease; }
.sa-prof-gallery a:hover img { transform: scale(1.04); }

/* Facts rail — icon-tile rows. */
.sa-prof-sec--facts {
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	background: var(--sa-surface-1, #171021);
	padding: 18px 18px 8px;
}
.sa-prof-facts { margin: 0; }
.sa-prof-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
}
.sa-prof-fact:last-child { border-bottom: 0; }
.sa-prof-fact__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1;
	background: var(--sa-surface-2, #1C1526);
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
}
.sa-prof-fact__ico.is-pink { background: color-mix(in srgb, var(--sa-heart, #FF3DAE) 14%, transparent); border-color: color-mix(in srgb, var(--sa-heart, #FF3DAE) 28%, transparent); }
.sa-prof-fact__ico.is-rose { background: color-mix(in srgb, #fb7185 14%, transparent); border-color: color-mix(in srgb, #fb7185 26%, transparent); }
.sa-prof-fact__ico.is-violet { background: color-mix(in srgb, #a78bfa 13%, transparent); border-color: color-mix(in srgb, #a78bfa 26%, transparent); }
.sa-prof-fact__ico.is-blue { background: color-mix(in srgb, #60a5fa 13%, transparent); border-color: color-mix(in srgb, #60a5fa 26%, transparent); }
.sa-prof-fact__ico.is-green { background: color-mix(in srgb, #34d399 12%, transparent); border-color: color-mix(in srgb, #34d399 24%, transparent); }
.sa-prof-fact__ico.is-slate { background: var(--sa-surface-2, #1C1526); }
.sa-prof-fact__meta { min-width: 0; flex: 1; }
.sa-prof-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-text-muted, #8E8399); margin: 0 0 1px; }
.sa-prof-fact dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--sa-text, #F4F0FA); overflow-wrap: anywhere; }
.sa-prof-fact__extra {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: var(--sa-radius-pill, 999px);
	font-size: 10.5px;
	font-weight: 700;
	color: var(--sa-heart, #FF3DAE);
	background: color-mix(in srgb, var(--sa-heart, #FF3DAE) 12%, transparent);
}

/* ── Premium centered back button ─────────────────────────────────────── */
.sa-prof-back { display: flex; justify-content: center; margin: 38px 0 0; }
#tie-wrapper a.sa-prof-back__btn,
.sa-prof-back__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 30px;
	border-radius: var(--sa-radius-pill, 999px);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--sa-surface-1, #171021), var(--sa-surface-1, #171021)) padding-box,
		var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)) border-box;
	color: var(--sa-text, #F4F0FA);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.sa-prof-back__btn:hover {
	transform: translateY(-2px);
	color: var(--sa-text, #F4F0FA);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--sa-heart, #FF3DAE) 32%, transparent);
}
.sa-prof-back__arrow { transition: transform .18s ease; }
.sa-prof-back__btn:hover .sa-prof-back__arrow { transform: translateX(-4px); }
.sa-prof-back__spark {
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
	.sa-prof-back__btn, .sa-prof-back__arrow { transition: none; }
	.sa-prof-back__btn:hover { transform: none; }
	.sa-prof-back__btn:hover .sa-prof-back__arrow { transform: none; }
}

/* ══ Directory ══════════════════════════════════════════════════════════ */
.sa-profdir { padding-top: 34px; padding-bottom: 48px; }

/* Centered premium hero header: ✦ eyebrow, gradient display title, count. */
.sa-profdir__head { margin: 0 0 28px; text-align: center; }
.sa-profdir__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sa-heart, #FF3DAE);
}
.sa-profdir__eyebrow span { margin-right: 4px; }
.sa-profdir__title {
	margin: 0 0 8px;
	font-family: var(--sa-font-display, inherit);
	font-size: clamp(30px, 5.5vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-profdir__sub { margin: 0 auto 20px; max-width: 520px; font-size: 14px; color: var(--sa-text-muted, #8E8399); }

/* Controls: search + group filter + sort, one centered row. */
.sa-profdir__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 720px;
	margin: 0 auto 14px;
}
.sa-profdir__field { display: flex; min-width: 0; }
.sa-profdir__field--search { flex: 1 1 220px; }
.sa-profdir__field--select { flex: 0 1 auto; }
.sa-profdir__controls input[type="search"],
.sa-profdir__controls select {
	min-width: 0;
	/* height:auto beats Jannah's bare `select { height: 30px }`, which would
	   otherwise squash the padded control and clip its label to specks. */
	height: auto;
	line-height: 1.4;
	padding: 10px 15px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-1, #171021);
	color: var(--sa-text, #F4F0FA);
	font-size: 13.5px;
}
.sa-profdir__controls input[type="search"] { width: 100%; }
.sa-profdir__controls select {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	padding-right: 34px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8399' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.sa-profdir__controls input[type="search"]:focus,
.sa-profdir__controls select:focus { outline: 0; border-color: var(--sa-heart, #FF3DAE); box-shadow: var(--sa-focus, 0 0 0 3px rgba(255, 61, 174, .25)); }
.sa-profdir__apply {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	color: var(--sa-on-accent, #fff);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
}

/* Custom dropdown (JS swaps it in over the hidden native select — the OS
   picker could anchor anywhere on mobile; this panel is absolutely positioned
   under its own button, so it can't). */
.sa-profdir__field--select { position: relative; }
.sa-profdir__field--select.is-dd select { display: none; }
#tie-wrapper .sa-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: auto;
	padding: 10px 15px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-1, #171021);
	color: var(--sa-text, #F4F0FA);
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 400;
	cursor: pointer;
	white-space: nowrap;
}
#tie-wrapper .sa-dd__btn:hover { border-color: var(--sa-border-strong, rgba(255, 255, 255, .2)); }
#tie-wrapper .sa-dd__btn:focus-visible { outline: 0; border-color: var(--sa-heart, #FF3DAE); box-shadow: var(--sa-focus, 0 0 0 3px rgba(255, 61, 174, .25)); }
.sa-dd__arr {
	width: 10px;
	height: 6px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8399' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	transition: transform .15s ease;
}
.sa-dd__btn[aria-expanded="true"] .sa-dd__arr { transform: rotate(180deg); }
.sa-dd__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 100%;
	/* Never wider than the phone: long group names ellipsize instead of
	   pushing the panel — and the page — past the viewport edge. */
	max-width: min(300px, calc(100vw - 24px));
	max-height: 280px;
	overflow: auto;
	z-index: 60;
	padding: 6px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: 14px;
	background: var(--sa-surface-1, #171021);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
#tie-wrapper .sa-dd__opt {
	display: block;
	width: 100%;
	padding: 8px 12px 8px 30px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--sa-text-dim, #C9C1D4);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#tie-wrapper .sa-dd__opt:hover { background: color-mix(in srgb, var(--sa-heart, #FF3DAE) 12%, transparent); color: var(--sa-text, #F4F0FA); }
#tie-wrapper .sa-dd__opt.is-on { color: var(--sa-text, #F4F0FA); font-weight: 700; }
#tie-wrapper .sa-dd__opt.is-on::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 5px;
	height: 9px;
	margin-top: -6px;
	border: solid var(--sa-heart, #FF3DAE);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.sa-profdir__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }

.sa-profdir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.sa-profdir__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px 14px 16px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	background: var(--sa-surface-1, #171021);
	text-decoration: none;
	text-align: center;
	transition: transform .18s ease, border-color .18s ease;
}
.sa-profdir__card:hover { transform: translateY(-3px); border-color: var(--sa-heart, #FF3DAE); }
.sa-profdir__card .sa-prof-av { width: 84px; height: 84px; margin: 0 0 8px; }
.sa-profdir__card .sa-prof-av--txt { font-size: 30px; }
.sa-profdir__name { font-weight: 700; font-size: 14.5px; color: var(--sa-text, #F4F0FA); overflow-wrap: anywhere; }
.sa-profdir__fandom { font-size: 11.5px; font-weight: 600; color: var(--sa-heart, #FF3DAE); }
.sa-profdir__meta { font-size: 11.5px; color: var(--sa-text-muted, #8E8399); }

/* Hybrid load-more: a real ?tp_page= link, enhanced to fetch + append. */
.sa-profdir__more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 0; }
#tie-wrapper a.sa-profdir__morebtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 26px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-1, #171021);
	color: var(--sa-text, #F4F0FA);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
#tie-wrapper a.sa-profdir__morebtn:hover { border-color: var(--sa-heart, #FF3DAE); transform: translateY(-2px); }
#tie-wrapper a.sa-profdir__morebtn.is-loading { opacity: .55; pointer-events: none; }
#tie-wrapper a.sa-profdir__morebtn--ghost { color: var(--sa-text-dim, #C9C1D4); }
.sa-profdir__count { margin: 0; font-size: 12.5px; color: var(--sa-text-muted, #8E8399); }

.sa-profdir__empty {
	border: 1px dashed var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	padding: 40px 24px;
	text-align: center;
	color: var(--sa-text-muted, #8E8399);
}
.sa-profdir__empty p { margin: 0 0 14px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
	.sa-prof-cols { grid-template-columns: minmax(0, 1fr); }
	.sa-prof-side { order: -1; }
}
@media (max-width: 640px) {
	.sa-prof-hero { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 22px 16px 18px; }
	.sa-prof-av { margin: 0 auto; width: 108px; height: 108px; }
	.sa-prof-hero__chips { justify-content: center; }
	.sa-prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; text-align: center; }
	.sa-prof-awards { grid-template-columns: minmax(0, 1fr); }
	.sa-prof-hist__row { flex-wrap: wrap; }
	.sa-prof-hist__tag { margin-left: 57px; }
	.sa-profdir__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ── Hero share button (delegated to the global share.js) ─────────────── */
.sa-prof-share {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 7px 16px;
	border: 1px solid var(--sa-border-strong, rgba(255, 255, 255, .18));
	border-radius: 999px;
	background: var(--sa-surface-1, rgba(255, 255, 255, .04));
	color: var(--sa-text, #fff);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.sa-prof-share:hover {
	border-color: transparent;
	background: var(--sa-gradient);
	color: var(--sa-on-accent, #fff);
	transform: translateY(-1px);
}
.sa-prof-share__ic { width: 15px; height: 15px; display: block; }
@media (max-width: 640px) {
	.sa-prof-share { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sa-prof-share { transition: none; }
	.sa-prof-share:hover { transform: none; }
}

/* Gallery items open the shared lightbox — signal clickability. */
.sa-prof-gallery a[data-sa-lightbox] { cursor: zoom-in; }

/* ── ♥ Favorite toggle (localStorage, favorites.js) ───────────────────── */
.sa-prof-fav {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 12px 8px 0 0;
	padding: 7px 16px;
	border: 1px solid var(--sa-border-strong, rgba(255, 255, 255, .18));
	border-radius: 999px;
	background: var(--sa-surface-1, rgba(255, 255, 255, .04));
	color: var(--sa-text, #fff);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.sa-prof-fav__hm { color: var(--sa-heart, #f43f5e); }
.sa-prof-fav:hover { border-color: color-mix(in srgb, var(--sa-heart, #f43f5e) 55%, transparent); transform: translateY(-1px); }
.sa-prof-fav.is-on {
	border-color: transparent;
	background: color-mix(in srgb, var(--sa-heart, #f43f5e) 18%, transparent);
	color: var(--sa-heart-2, #fb7185);
}
@media (max-width: 640px) { .sa-prof-fav { margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .sa-prof-fav { transition: none; } .sa-prof-fav:hover { transform: none; } }

/* ── "Your idols" strip on the directory ──────────────────────────────── */
.sa-profdir__favs { margin: 0 0 18px; }
.sa-profdir__favs-t { font-size: 15px; margin: 0 0 8px; }
.sa-profdir__favs-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#tie-wrapper a.sa-profdir__favlink {
	display: inline-flex;
	padding: 6px 13px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .1));
	border-radius: 999px;
	background: var(--sa-surface-1, rgba(255, 255, 255, .04));
	color: var(--sa-text, #fff);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
#tie-wrapper a.sa-profdir__favlink:hover { border-color: var(--sa-border-strong, rgba(255, 255, 255, .18)); background: var(--sa-surface-2, rgba(255, 255, 255, .07)); }

/* ══ Profile v2 additions (bio restore + interactive stats) ═════════════ */

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.sa-prof-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--sa-text-muted, #8E8399);
}
#tie-wrapper .sa-prof-crumb a { color: var(--sa-text-muted, #8E8399); text-decoration: none; }
#tie-wrapper .sa-prof-crumb a:hover { color: var(--sa-heart, #FF3DAE); }
.sa-prof-crumb__here { color: var(--sa-text-dim, #C9C1D4); font-weight: 600; }

/* ── Hero: native (Korean) name ────────────────────────────────────────── */
.sa-prof-hero__native {
	display: inline-block;
	margin-left: 8px;
	font-size: .48em;
	font-weight: 600;
	color: var(--sa-text-muted, #8E8399);
	vertical-align: middle;
	letter-spacing: .01em;
}

/* ── Hero: sub-stats row (derived metrics) ─────────────────────────────── */
.sa-prof-substats {
	position: relative;
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.sa-prof-substats li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-2, #1C1526);
}
.sa-prof-substats span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sa-text-muted, #8E8399); }
.sa-prof-substats strong { font-size: 13px; font-weight: 800; color: var(--sa-text, #F4F0FA); }

/* ── Achievement badges ────────────────────────────────────────────────── */
.sa-prof-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.sa-prof-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-1, #171021);
	color: var(--sa-text-dim, #C9C1D4);
	font-size: 12.5px;
	font-weight: 700;
}
.sa-prof-badge__ico { font-size: 13px; line-height: 1; }
.sa-prof-badge.is-top {
	border-color: transparent;
	background:
		linear-gradient(var(--sa-surface-1, #171021), var(--sa-surface-1, #171021)) padding-box,
		var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)) border-box;
	color: var(--sa-text, #F4F0FA);
}
.sa-prof-badge.is-top .sa-prof-badge__ico {
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── "In the running now" live callout ─────────────────────────────────── */
.sa-prof-live {
	position: relative;
	margin: 0 0 26px;
	padding: 16px 18px;
	border: 1px solid color-mix(in srgb, var(--sa-heart, #FF3DAE) 40%, transparent);
	border-radius: var(--sa-radius, 16px);
	background:
		radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--sa-heart, #FF3DAE) 10%, transparent), transparent 55%),
		var(--sa-surface-1, #171021);
	overflow: hidden;
}
.sa-prof-live__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--sa-text, #F4F0FA);
}
.sa-prof-live__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sa-heart, #FF3DAE);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--sa-heart, #FF3DAE) 55%, transparent);
	animation: sa-prof-pulse 1.8s ease-out infinite;
}
@keyframes sa-prof-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sa-heart, #FF3DAE) 55%, transparent); }
	70% { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .sa-prof-live__dot { animation: none; } }
.sa-prof-live__list { display: flex; flex-direction: column; gap: 7px; }
#tie-wrapper a.sa-prof-live__item,
.sa-prof-live__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-sm, 10px);
	background: var(--sa-surface-2, #1C1526);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.sa-prof-live__item:hover { border-color: var(--sa-heart, #FF3DAE); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .sa-prof-live__item { transition: none; } .sa-prof-live__item:hover { transform: none; } }
.sa-prof-live__title { font-size: 13.5px; font-weight: 700; color: var(--sa-text, #F4F0FA); overflow-wrap: anywhere; }
.sa-prof-live__cta {
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	color: var(--sa-on-accent, #fff);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

/* ── Performance trend chart ───────────────────────────────────────────── */
.sa-prof-trend .sa-prof-sec__title { flex-wrap: wrap; }
.sa-prof-trend__toggle {
	display: inline-flex;
	gap: 4px;
	margin: 0 0 12px;
	padding: 4px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-1, #171021);
}
.sa-prof-trend__tab {
	padding: 6px 16px;
	border: 0;
	border-radius: var(--sa-radius-pill, 999px);
	background: transparent;
	color: var(--sa-text-muted, #8E8399);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}
.sa-prof-trend__tab.is-active {
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	color: var(--sa-on-accent, #fff);
}
.sa-prof-trend__wrap {
	position: relative;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	background: var(--sa-surface-1, #171021);
	padding: 14px 14px 10px;
}
.sa-prof-trend__wrap svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 180; overflow: visible; }
.sa-prof-trend__stop-a { stop-color: var(--sa-heart, #FF3DAE); stop-opacity: .30; }
.sa-prof-trend__stop-b { stop-color: var(--sa-heart, #FF3DAE); stop-opacity: .02; }
.sa-prof-trend__area { fill: url(#saTrendFill); stroke: none; }
.sa-prof-trend__line {
	fill: none;
	stroke: var(--sa-heart, #FF3DAE);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.sa-prof-trend__dot { fill: var(--sa-bg, #0F0B16); stroke: var(--sa-heart, #FF3DAE); stroke-width: 2; }
.sa-prof-trend__hit { cursor: pointer; outline-offset: 3px; }
.sa-prof-trend__tip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 14px));
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-width: 230px;
	padding: 9px 12px;
	border: 1px solid var(--sa-border-strong, rgba(255, 255, 255, .18));
	border-radius: var(--sa-radius-sm, 10px);
	background: var(--sa-surface-2, #1C1526);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	pointer-events: none;
	z-index: 5;
}
.sa-prof-trend__tip.is-below { transform: translate(-50%, 14px); }
.sa-prof-trend__tip b { font-size: 12.5px; color: var(--sa-text, #F4F0FA); overflow-wrap: anywhere; }
.sa-prof-trend__tipdate { font-size: 11px; color: var(--sa-text-muted, #8E8399); }
.sa-prof-trend__tipval { font-size: 12px; font-weight: 700; color: var(--sa-heart, #FF3DAE); }
.sa-prof-trend__legend { margin: 8px 0 0; font-size: 11.5px; color: var(--sa-text-muted, #8E8399); }

/* ── Award summary boxes + per-org breakdown ───────────────────────────── */
.sa-prof-awardsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.sa-prof-awardsum__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 10px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-sm, 10px);
	background: var(--sa-surface-1, #171021);
	text-align: center;
}
.sa-prof-awardsum__box.is-daesang {
	border-color: transparent;
	background:
		linear-gradient(var(--sa-surface-1, #171021), var(--sa-surface-1, #171021)) padding-box,
		var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF)) border-box;
	border: 1px solid transparent;
}
.sa-prof-awardsum__ico {
	font-size: 15px;
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sa-prof-awardsum__box strong {
	font-family: var(--sa-font-display, inherit);
	font-size: 22px;
	line-height: 1.1;
	color: var(--sa-text, #F4F0FA);
}
.sa-prof-awardsum__box > span:last-child { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-text-muted, #8E8399); }
.sa-prof-awardorgs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.sa-prof-awardorg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius-pill, 999px);
	background: var(--sa-surface-2, #1C1526);
	font-size: 12px;
	font-weight: 600;
	color: var(--sa-text-dim, #C9C1D4);
}
.sa-prof-awardorg strong { color: var(--sa-heart, #FF3DAE); font-weight: 800; }
.sa-prof-award strong { display: flex; align-items: baseline; gap: 6px; }
.sa-prof-award__mark {
	background: var(--sa-gradient, linear-gradient(135deg, #FF3DAE, #A93BFF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 12px;
}

/* ── "More idols" strip ────────────────────────────────────────────────── */
.sa-prof-more { margin: 34px 0 0; }
.sa-prof-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
#tie-wrapper a.sa-prof-more__card,
.sa-prof-more__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 16px 10px 13px;
	border: 1px solid var(--sa-border, rgba(255, 255, 255, .12));
	border-radius: var(--sa-radius, 16px);
	background: var(--sa-surface-1, #171021);
	text-align: center;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
}
.sa-prof-more__card:hover { transform: translateY(-3px); border-color: var(--sa-heart, #FF3DAE); }
@media (prefers-reduced-motion: reduce) { .sa-prof-more__card { transition: none; } .sa-prof-more__card:hover { transform: none; } }
.sa-prof-more__card .sa-prof-av { width: 64px; height: 64px; margin: 0 0 7px; box-shadow: 0 0 0 2px var(--sa-bg, #0F0B16), 0 0 0 3px var(--sa-border-strong, rgba(255, 255, 255, .18)); }
.sa-prof-more__card:hover .sa-prof-av { box-shadow: 0 0 0 2px var(--sa-bg, #0F0B16), 0 0 0 3px var(--sa-heart, #FF3DAE); }
.sa-prof-more__card .sa-prof-av--txt { font-size: 24px; }
.sa-prof-more__name { font-size: 13px; font-weight: 700; color: var(--sa-text, #F4F0FA); overflow-wrap: anywhere; }
.sa-prof-more__votes { font-size: 11px; font-weight: 600; color: var(--sa-text-muted, #8E8399); }

/* ── v2 responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* The viewBox is 600×180 with preserveAspectRatio=none — stretch it
	   taller on phones so the line stays readable at narrow widths. */
	.sa-prof-trend__wrap svg { aspect-ratio: 600 / 300; }
	.sa-prof-hero__native { display: block; margin: 4px 0 0; font-size: 14px; }
	.sa-prof-substats { justify-content: center; gap: 6px; }
	.sa-prof-substats li { padding: 5px 11px; }
	.sa-prof-badges { justify-content: center; }
	.sa-prof-live__item { flex-wrap: wrap; }
	.sa-prof-live__cta { margin-left: auto; }
	.sa-prof-awardsum { gap: 6px; }
	.sa-prof-more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.sa-prof-more__card { padding: 12px 6px 10px; }
	.sa-prof-back__btn { width: 100%; max-width: 340px; justify-content: center; }
}