/**
 * Public profile feature styles — single profile, directory/archive, and the
 * leaderboard shortcode. Theme-agnostic and scoped under .tp-profile-page.
 *
 * IMPORTANT (bug history): every text element sits inside its own white "panel"
 * card and is given an EXPLICIT colour, so a dark host theme that sets
 * `h1{color:#fff}` can never make a heading invisible on a white card again.
 *
 * All pages that load this are fully cacheable (no per-visitor state). No build
 * step: edit this file directly.
 */

.tp-profile-page {
	--tp-accent: #6d28d9;
	--tp-accent-2: #db2777;
	--tp-gold: #b8860b;
	--tp-ink: #14121a;
	--tp-ink-2: #3a3645;
	--tp-muted: #6b7280;
	--tp-line: #e7e7ee;
	--tp-card: #ffffff;
	--tp-bg-soft: #f6f6fb;
	--tp-radius: 16px;
	--tp-shadow: 0 1px 2px rgba(20, 18, 26, .06), 0 10px 30px rgba(20, 18, 26, .07);
	max-width: 980px;
	margin: 0 auto;
	padding: 20px 16px 48px;
	box-sizing: border-box;
	/* NOTE: we deliberately do NOT set a text colour on the container. Text that
	   sits on a white .tp-panel/card forces its own dark colour; text that sits
	   on the bare page (directory title, leaderboard title) inherits the host
	   theme's colour, which is by definition readable on the theme's background.
	   This is what prevents the "white name on white card" bug from recurring. */
}

.tp-profile-page * { box-sizing: border-box; }
.tp-profile-page a { color: var(--tp-accent); text-decoration: none; }
.tp-profile-page a:hover { text-decoration: underline; }

/* ---------- Panel (the universal white card) ---------- */
.tp-panel {
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius);
	box-shadow: var(--tp-shadow);
	padding: 22px 24px;
	margin: 0 0 20px;
	color: var(--tp-ink);
}
.tp-panel h1, .tp-panel h2, .tp-panel h3, .tp-panel p, .tp-panel td, .tp-panel th, .tp-panel span, .tp-panel b, .tp-panel div { color: inherit; }
/* Links inside a panel must NOT inherit a dark host-theme link colour that turns
   them invisible on the white card — force the accent (the "white poll title"
   bug). !important because the host theme styles content links with high
   specificity (e.g. #main-content-row a), which a plain class selector loses to. */
.tp-panel a { color: var(--tp-accent) !important; }
.tp-history td a { color: var(--tp-accent) !important; font-weight: 600; }
.tp-history td a:hover { text-decoration: underline; }

.tp-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tp-panel-ico {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: #eef0fe;
}
.tp-panel-titles { flex: 1 1 auto; min-width: 0; }
.tp-panel-titles h2 { margin: 0; font-size: 20px; line-height: 1.2; color: var(--tp-ink); }
.tp-panel-sub { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-muted); font-weight: 700; }
.tp-panel-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.tp-panel-badge.is-active { background: #e7f7ee; color: #1a8d52; }
.tp-panel-badge.is-hiatus, .tp-panel-badge.is-enlisted { background: #fdf3e2; color: #b06a00; }
.tp-panel-badge.is-inactive, .tp-panel-badge.is-disbanded { background: #f1f1f4; color: #6b7280; }

/* ---------- Hero ---------- */
.tp-hero {
	position: relative;
	border-radius: var(--tp-radius);
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: var(--tp-shadow);
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
}
.tp-hero-cover {
	height: 160px;
	background: linear-gradient(120deg, var(--tp-accent), var(--tp-accent-2));
	background-size: cover;
	background-position: center;
}
.tp-hero-body { position: relative; padding: 0 26px 24px; display: flex; gap: 22px; align-items: flex-end; }

/* Focal avatar frame — mirrors the Bicanosaurus nominee crop (img sized 308% *
   zoom, offset by --np-fx/--np-fy) so the face stays centred. */
.tp-hero-avatar {
	position: relative;
	overflow: hidden;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 5px solid var(--tp-card);
	background: var(--tp-bg-soft);
	margin-top: -70px;
	flex: 0 0 auto;
	box-shadow: var(--tp-shadow);
}
.tp-hero-avatar img {
	position: absolute;
	width: calc(308% * var(--np-zoom, 1));
	height: calc(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%;
}
.tp-hero-avatar.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 54px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-2));
}
.tp-hero-meta { flex: 1 1 auto; padding-bottom: 6px; min-width: 0; }
.tp-hero-meta h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; color: var(--tp-ink); }

.tp-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-line);
	font-size: 13px;
	color: var(--tp-ink-2);
	line-height: 1.5;
}
.tp-tag.is-niche { background: #efeafd; border-color: #ddd2fb; color: #5b21b6; }
.tp-tag.is-fandom { background: #fdeaf3; border-color: #f7cfe2; color: #9d174d; }

/* ---------- Badges ---------- */
.tp-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.tp-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 999px;
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
	box-shadow: var(--tp-shadow);
	font-size: 13px;
	font-weight: 700;
	color: var(--tp-ink-2);
}
.tp-badge .tp-badge-ico { font-size: 16px; line-height: 1; }
.tp-badge.is-gold { border-color: #f0e1b8; background: #fffbef; color: #8a6d12; }

/* ---------- Stats ---------- */
.tp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 20px; }
.tp-stat {
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius);
	padding: 18px 14px;
	text-align: center;
	box-shadow: var(--tp-shadow);
}
.tp-stat b { display: block; font-size: 28px; line-height: 1.05; color: var(--tp-ink); }
.tp-stat span { font-size: 12.5px; color: var(--tp-muted); }
.tp-stat.is-win b { color: var(--tp-gold); }

/* ---------- Trend chart ---------- */
.tp-chart-wrap svg { display: block; width: 100%; height: auto; }
.tp-chart-legend { font-size: 12px; color: var(--tp-muted); margin: 8px 2px 0; }

/* ---------- Biography ---------- */
.tp-bio { line-height: 1.75; color: var(--tp-ink-2); }
.tp-bio p:last-child { margin-bottom: 0; }

/* ---------- Profile Info grid ---------- */
.tp-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.tp-info-row { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tp-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: #eef1f5;
}
.tp-ico.tone-indigo { background: #eef0fe; }
.tp-ico.tone-blue { background: #e8f1fe; }
.tp-ico.tone-pink { background: #fdeaf3; }
.tp-ico.tone-rose { background: #fdeaea; }
.tp-ico.tone-violet { background: #f1eafe; }
.tp-ico.tone-green { background: #e7f7ee; }
.tp-ico.tone-amber { background: #fdf3e2; }
.tp-ico.tone-slate { background: #eef1f5; }
.tp-info-meta { min-width: 0; }
.tp-info-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-muted); font-weight: 700; }
.tp-info-value { font-size: 15.5px; font-weight: 700; color: var(--tp-ink); word-break: break-word; }
.tp-info-value .tp-info-extra { font-weight: 500; color: var(--tp-muted); font-size: 13px; }
.tp-info-value a { font-weight: 700; }
.tp-swatches { display: inline-flex; gap: 6px; vertical-align: middle; }
.tp-swatch { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .08); display: inline-block; }

/* ---------- Trophy Case ---------- */
.tp-trophy-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; }
.tp-trophy-box {
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	padding: 16px;
	text-align: center;
	background: var(--tp-bg-soft);
}
.tp-trophy-box .tp-trophy-ico { font-size: 22px; }
.tp-trophy-box b { display: block; font-size: 30px; line-height: 1.1; color: var(--tp-ink); }
.tp-trophy-box span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-muted); font-weight: 700; }
.tp-trophy-orgs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-trophy-org {
	flex: 1 1 90px;
	border: 1px solid var(--tp-line);
	border-radius: 12px;
	padding: 12px 10px;
	text-align: center;
	background: var(--tp-card);
}
.tp-trophy-org .tp-org-name { font-size: 13px; font-weight: 800; color: var(--tp-ink); }
.tp-trophy-org .tp-org-count { font-size: 14px; font-weight: 800; color: var(--tp-accent-2); }
.tp-award-list { display: flex; flex-direction: column; gap: 10px; }
.tp-award {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--tp-line);
	border-radius: 12px;
	padding: 12px 14px;
	background: var(--tp-bg-soft);
}
.tp-award.is-daesang { background: #fffbef; border-color: #f0e1b8; }
.tp-award-medal { font-size: 20px; flex: 0 0 auto; }
.tp-award-main { flex: 1 1 auto; min-width: 0; }
.tp-award-title { font-size: 15px; font-weight: 700; color: var(--tp-ink); }
.tp-award-org { font-size: 12.5px; color: var(--tp-muted); }
.tp-award-date { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--tp-accent); white-space: nowrap; }

/* ---------- Gallery ---------- */
.tp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tp-gallery-cell {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-line);
}
.tp-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.tp-gallery-cell:hover img { transform: scale(1.05); }

/* Lightbox */
.tp-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 8, 16, .88);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}
.tp-lightbox.is-open { display: flex; }
.tp-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.tp-lightbox-close { position: absolute; top: 18px; right: 24px; font-size: 34px; color: #fff; cursor: pointer; line-height: 1; background: none; border: 0; }

/* ---------- History table ---------- */
.tp-history { width: 100%; border-collapse: separate; border-spacing: 0; }
.tp-history th, .tp-history td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--tp-line); color: var(--tp-ink); }
.tp-history thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tp-muted); }
.tp-history tbody tr:last-child td { border-bottom: 0; }
.tp-history tbody tr:hover { background: var(--tp-bg-soft); }
.tp-history .tp-col-rank, .tp-history .tp-col-votes { white-space: nowrap; }
.tp-rank-pill {
	display: inline-block;
	min-width: 34px;
	text-align: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	background: var(--tp-bg-soft);
	color: var(--tp-ink-2);
}
.tp-rank-pill.is-win { background: #fff5d6; color: var(--tp-gold); }
.tp-rank-pill.is-podium { background: #efeafd; color: #5b21b6; }
.tp-rank-total { color: #9aa0aa; font-size: 12.5px; margin-left: 4px; }
.tp-empty { color: var(--tp-muted); font-style: italic; padding: 8px 2px; }

/* ---------- Directory / archive ---------- */
.tp-directory-head h1 { margin: 0 0 6px; font-size: 28px; color: inherit; }
.tp-directory-head p { margin: 0; color: inherit; opacity: .7; }
.tp-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 18px 0 22px; }
.tp-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.tp-search input[type="search"] {
	flex: 1 1 auto;
	padding: 10px 14px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	font-size: 14px;
	background: var(--tp-card);
	color: var(--tp-ink);
}
.tp-search button { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--tp-accent); color: #fff; font-weight: 600; cursor: pointer; }
.tp-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-chip { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--tp-line); background: var(--tp-card); font-size: 13px; color: var(--tp-ink-2); }
.tp-chip.is-active { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; }
.tp-card {
	display: block;
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius);
	padding: 18px 14px;
	text-align: center;
	box-shadow: var(--tp-shadow);
	color: inherit;
	transition: transform .12s ease, box-shadow .12s ease;
}
.tp-card:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 6px 14px rgba(20, 18, 26, .12); }
.tp-card-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 35%; margin: 0 auto 12px; background: var(--tp-bg-soft); display: block; }
.tp-card-photo.is-placeholder { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-2)); }
.tp-card-name { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--tp-ink); }
.tp-card-sub { font-size: 12.5px; color: var(--tp-muted); }
.tp-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.tp-pagination .page-numbers { display: inline-block; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--tp-line); background: var(--tp-card); color: var(--tp-ink-2); }
.tp-pagination .page-numbers.current { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }

/* ---------- Leaderboard ---------- */
.tp-leaderboard {
	--tp-accent: #6d28d9;
	--tp-accent-2: #db2777;
	--tp-gold: #b8860b;
	--tp-ink: #14121a;
	--tp-muted: #6b7280;
	--tp-line: #e7e7ee;
	--tp-card: #ffffff;
	--tp-bg-soft: #f6f6fb;
	--tp-radius: 14px;
	--tp-shadow: 0 1px 2px rgba(20, 18, 26, .06), 0 8px 24px rgba(20, 18, 26, .06);
	max-width: 720px;
	margin: 0 auto;
}
.tp-lb-title { color: inherit; margin: 0 0 14px; }
.tp-lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: var(--tp-radius); margin-bottom: 10px; box-shadow: var(--tp-shadow); }
.tp-lb-rank { flex: 0 0 auto; width: 38px; text-align: center; font-weight: 800; font-size: 17px; color: var(--tp-muted); }
.tp-lb-row.is-top .tp-lb-rank { color: var(--tp-gold); font-size: 20px; }
.tp-lb-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 35%; flex: 0 0 auto; background: var(--tp-bg-soft); }
.tp-lb-photo.is-placeholder { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-2)); }
.tp-lb-main { flex: 1 1 auto; min-width: 0; }
.tp-lb-name { font-weight: 700; font-size: 15px; color: var(--tp-ink); }
.tp-lb-sub { font-size: 12.5px; color: var(--tp-muted); }
.tp-lb-votes { flex: 0 0 auto; text-align: right; }
.tp-lb-votes b { display: block; font-size: 18px; color: var(--tp-ink); }
.tp-lb-votes span { font-size: 11.5px; color: var(--tp-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.tp-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.tp-stats { grid-template-columns: repeat(2, 1fr); }
	.tp-hero-body { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 18px 22px; }
	.tp-hero-meta h1 { font-size: 24px; }
	.tp-tags, .tp-badges, .tp-hero-fandom { justify-content: center; }
	.tp-panel { padding: 18px 16px; }
	.tp-panel-head { gap: 11px; }
	.tp-trophy-summary { grid-template-columns: 1fr; }
	.tp-award { flex-wrap: wrap; }
	.tp-award-date { width: 100%; padding-left: 33px; }
}

/* ============================================================================
   Dark-glass theme for the SINGLE idol profile page only (.tp-idol).
   Scoped so the directory + leaderboard (also .tp-profile-page) stay light.
   Most base rules are var()-driven, so redefining the tokens flips them dark;
   the rest are explicit overrides + the new poll-history / name components.
   ============================================================================ */
.tp-profile-page.tp-idol {
	--tp-ink: #f5f3ff;
	--tp-ink-2: #cbd5e1;
	--tp-muted: #94a3b8;
	--tp-line: rgba(148, 163, 184, 0.16);
	--tp-card: #1b1730;
	--tp-bg-soft: #221d38;
	--tp-accent: #a78bfa;
	--tp-gold: #fbbf24;
	--tp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.38);

	/* Boxed dark "stage" so the dark cards never float on a light host theme.
	   Gradient matches the Bicanosaurus vote box (.totalpoll-questions:
	   linear-gradient(180deg,#17141f,#0f1016)) so the profile reads as the same
	   premium surface as the poll. The inner cards (#1b1730) sit one shade
	   lighter than this, so they still "pop" against the container. */
	background: linear-gradient(180deg, #17141f, #0f1016);
	border: 1px solid rgba(124, 139, 255, 0.18);
	border-radius: 24px;
	box-shadow: var(--tp-shadow);
	padding: 22px 22px 6px;
	margin: 24px auto;
}
/* The container already provides the bottom breathing room via its own padding,
   so the last card must not add its 20px margin and double it up. */
.tp-profile-page.tp-idol > :last-child { margin-bottom: 16px; }

@media (max-width: 560px) {
	.tp-profile-page.tp-idol { padding: 14px 12px 2px; border-radius: 18px; margin: 16px auto; }
}

/* Hero (no cover image): photo + name sit in one dark card. The flat card felt
   empty, so we layer two soft ambient glows — a purple halo from the top centre
   (sits behind the avatar) and a faint rose glow rising from the bottom-right —
   over the base card colour. overflow:hidden on .tp-hero clips them to the
   rounded card, giving a premium "spotlight on the idol" feel with no extra DOM. */
.tp-idol .tp-hero {
	border-color: rgba(139, 92, 246, 0.22);
	background:
		radial-gradient(120% 75% at 50% -12%, rgba(167, 139, 250, 0.24), transparent 60%),
		radial-gradient(90% 80% at 108% 115%, rgba(244, 63, 94, 0.13), transparent 55%),
		var(--tp-card);
}
/* A glowing purple ring + soft halo lifts the portrait off the card. */
.tp-idol .tp-hero-avatar {
	box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35), 0 14px 44px rgba(167, 139, 250, 0.38);
}
.tp-idol .tp-hero-body { padding: 24px 26px; align-items: center; }
/* The dark hero has NO cover image, so the base avatar's margin-top:-70px (which
   only made sense overlapping a cover) would yank it above the card and the
   card's overflow:hidden would clip its top. Reset it so the avatar sits fully
   inside the padded card. */
.tp-idol .tp-hero-avatar { margin-top: 0; border: 2px solid rgba(251, 191, 36, 0.5); border-radius: 22px; }
/* The nominee images are full PROMO CARDS (award title + "NOMINEE" on top, the
   face in a gold-bordered portrait in the MIDDLE, the name + vote button at the
   bottom). We must crop INTO that middle portrait, tight enough that the idol's
   FACE fills the frame edge-to-edge with no grey studio background showing on
   the sides, while excluding the award/NOMINEE banner above and the name/buttons
   below. Effective zoom = 2 * 1.85 = 3.7x, centred (fx .5), biased slightly up
   onto the face (fy .45) so the head fills the width without clipping the
   hairline. NB: the old 2.0x/fy.34 only looked right because a stale
   margin-top:-70px was clipping the top of the frame — once that clip was
   removed the banner + grey side margins showed, so this was re-tuned live
   against the promo-card template. Profiles with an admin-set focal still
   override via their own --np-zoom/fx/fy. */
.tp-idol .tp-hero-avatar img {
	width: calc(200% * var(--np-zoom, 1.85));
	height: calc(200% * var(--np-zoom, 1.85));
	left: calc(var(--np-fx, .5) * (1 - 2 * var(--np-zoom, 1.85)) * 100%);
	top: calc(var(--np-fy, .45) * (1 - 2 * var(--np-zoom, 1.85)) * 100%);
}
.tp-idol .tp-hero-meta h1 { color: #fff; }
.tp-idol .tp-name-native { font-weight: 500; font-size: 0.62em; color: #cbd5e1; opacity: 0.85; white-space: nowrap; }

/* Tags / chips — clear hierarchy: the GROUP is the hero chip (gradient pill,
   white text, larger), the fandom is a quieter secondary line beneath it. */
.tp-idol .tp-tag.is-group {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
	border-color: rgba(167, 139, 250, 0.55);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.04em;
	padding: 6px 16px;
	box-shadow: 0 4px 14px rgba(124, 58, 237, 0.38);
}
.tp-idol .tp-tag.is-niche { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.3); color: #c4b5fd; }

/* Fandom line — sits below the group, visibly secondary: a small uppercase
   "Fandom" label + a soft rose chip with a heart. */
.tp-idol .tp-hero-fandom { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.tp-idol .tp-tag.is-fandom {
	background: rgba(244, 63, 94, 0.14);
	border-color: rgba(244, 63, 94, 0.3);
	color: #fda4af;
	font-size: 12.5px;
	padding: 3px 11px;
}
.tp-idol .tp-fandom-heart { color: #fb7185; font-size: 11px; }

/* Stats — responsive count (3 cards when "Wins" is hidden, 4 when shown). */
.tp-idol .tp-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.tp-idol .tp-stat { border-color: rgba(148, 163, 184, 0.14); }

/* Badges / trophy gold accents */
.tp-idol .tp-badge.is-gold { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.tp-idol .tp-award.is-daesang { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); }

/* Gallery cells */
.tp-idol .tp-gallery-cell img { border-color: rgba(148, 163, 184, 0.18); }

/* ---------- Poll history list (active / closed) ---------- */
.tp-idol .tp-ph-list { display: flex; flex-direction: column; }
.tp-idol .tp-ph-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 6px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	text-decoration: none;
	border-radius: 8px;
}
.tp-idol .tp-ph-item:last-child { border-bottom: 0; }
.tp-idol .tp-ph-item:hover { background: rgba(139, 92, 246, 0.08); }
.tp-idol .tp-ph-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	min-width: 74px;
	justify-content: center;
}
.tp-idol .tp-ph-status.is-active { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.tp-idol .tp-ph-status.is-closed { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }
.tp-idol .tp-ph-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.tp-idol .tp-ph-status.is-active .tp-ph-dot { animation: tpPhPulse 1.6s ease infinite; }
@keyframes tpPhPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }
.tp-idol .tp-ph-title {
	flex: 1 1 auto;
	min-width: 0;
	color: #f5f3ff !important;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tp-idol .tp-ph-item:hover .tp-ph-title { text-decoration: underline; }
.tp-idol .tp-ph-rank { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #c4b5fd; }
.tp-idol .tp-ph-rank.is-win { color: #fbbf24; }
.tp-idol .tp-ph-rank.is-podium { color: #a78bfa; }
.tp-idol .tp-ph-rank small { font-weight: 600; font-size: 0.78em; color: #94a3b8; }
.tp-idol .tp-ph-votes { flex: 0 0 auto; min-width: 70px; text-align: right; font-size: 13px; font-weight: 700; color: #cbd5e1; }
.tp-idol .tp-ph-votes small { font-weight: 500; color: #94a3b8; }

@media (max-width: 560px) {
	.tp-idol .tp-ph-item { flex-wrap: wrap; gap: 8px 10px; }
	.tp-idol .tp-ph-title { order: -1; flex-basis: 100%; white-space: normal; }
	.tp-idol .tp-ph-votes { margin-left: auto; }
}

/* ============================================================================
   New components (idol single page): "in the running" callout, secondary
   metrics strip, niche standing, interactive trend toggle + tooltip.
   Base rules use the design tokens; the .tp-idol overrides add the dark glow.
   ============================================================================ */

/* ---------- "In the running now" callout (active polls CTA) ---------- */
.tp-live-callout {
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radius);
	background: var(--tp-card);
	box-shadow: var(--tp-shadow);
	padding: 16px;
	margin: 0 0 20px;
}
.tp-live-head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tp-accent-2);
	margin-bottom: 12px;
}
.tp-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); animation: tpLivePulse 1.7s ease-out infinite; }
@keyframes tpLivePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.tp-live-list { display: flex; flex-direction: column; gap: 10px; }
.tp-live-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 14px 13px 16px;
	border-radius: 14px;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-line);
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.tp-live-item:hover { border-color: var(--tp-accent); transform: translateY(-1px); }
.tp-live-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--tp-ink);
	/* One clean line on wide screens; wraps to 2 lines on mobile (override below). */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tp-live-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 800;
	font-size: 13px;
	color: #fff !important;
	background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-2));
	padding: 9px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(219, 39, 119, 0.28);
}
.tp-live-item:hover .tp-live-cta { box-shadow: 0 8px 22px rgba(219, 39, 119, 0.4); }

.tp-idol .tp-live-callout {
	border-color: rgba(239, 68, 68, 0.28);
	background:
		radial-gradient(120% 130% at 0% 0%, rgba(239, 68, 68, 0.12), transparent 55%),
		var(--tp-card);
}
.tp-idol .tp-live-item {
	/* Soft accent so the item reads as "live" without being noisy. */
	background:
		linear-gradient(90deg, rgba(219, 39, 119, 0.12), rgba(148, 163, 184, 0.05) 40%),
		var(--tp-card);
	border-color: rgba(148, 163, 184, 0.16);
}
.tp-idol .tp-live-item:hover { border-color: rgba(167, 139, 250, 0.55); background: linear-gradient(90deg, rgba(167, 139, 250, 0.16), rgba(148, 163, 184, 0.06) 45%), var(--tp-card); }
.tp-idol .tp-live-title { color: #f5f3ff; }

/* Mobile: stack every item the SAME way — title (up to 2 lines) then a
   full-width button. No ragged "some inline, some wrapped" layouts. */
@media (max-width: 560px) {
	.tp-live-callout { padding: 14px; }
	.tp-live-item { flex-direction: column; align-items: stretch; gap: 11px; padding: 14px; }
	.tp-live-title {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.tp-live-cta { width: 100%; padding: 11px 16px; font-size: 14px; }
}

/* ---------- Secondary metrics strip ---------- */
.tp-substats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: -8px 0 20px;
}
.tp-substat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-line);
}
.tp-substat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tp-muted); }
.tp-substat-value { font-size: 18px; font-weight: 800; color: var(--tp-ink); }
.tp-idol .tp-substat { background: rgba(148, 163, 184, 0.07); border-color: rgba(148, 163, 184, 0.14); }

/* ---------- Niche standing ---------- */
.tp-niche-rank {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--tp-card);
	border: 1px solid var(--tp-line);
	box-shadow: var(--tp-shadow);
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-ink-2);
	margin: 0 0 20px;
	text-decoration: none;
}
.tp-niche-rank b { color: var(--tp-ink); }
.tp-niche-rank small { color: var(--tp-muted); font-weight: 600; }
.tp-niche-rank-medal { font-size: 17px; line-height: 1; }
.tp-idol .tp-niche-rank {
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(167, 139, 250, 0.12));
	border-color: rgba(251, 191, 36, 0.3);
	color: #e9e4ff !important;
}
.tp-idol .tp-niche-rank b { color: #fde68a; }
a.tp-niche-rank:hover { border-color: var(--tp-accent); }

/* ---------- Interactive trend chart ---------- */
.tp-panel-head { position: relative; }
.tp-trend-toggle {
	margin-left: auto;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-line);
}
.tp-trend-tab {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--tp-muted);
	line-height: 1.4;
}
.tp-trend-tab.is-active { background: var(--tp-accent); color: #fff; }
.tp-idol .tp-trend-toggle { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.16); }
.tp-idol .tp-trend-tab.is-active { background: var(--tp-accent); color: #1b1730; }

.tp-chart-wrap { position: relative; }
.tp-trend-hit { cursor: pointer; }
.tp-chart-tip {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, calc(-100% - 14px));
	pointer-events: none;
	min-width: 120px;
	max-width: 220px;
	padding: 9px 12px;
	border-radius: 10px;
	background: #0f1016;
	border: 1px solid rgba(167, 139, 250, 0.4);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	color: #f5f3ff;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: center;
}
.tp-chart-tip b { display: block; font-weight: 800; font-size: 13px; color: #fff; }
.tp-chart-tip .tp-tip-date { display: block; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.tp-chart-tip .tp-tip-val { display: block; margin-top: 4px; font-weight: 700; color: #c4b5fd; }
.tp-chart-tip.is-below { transform: translate(-50%, 14px); }
.tp-chart-tip[hidden] { display: none; }

@media (max-width: 560px) {
	.tp-trend-toggle { margin: 10px 0 0; }
	.tp-panel-head { flex-wrap: wrap; }
}