@mundogamernetwork/shared-ui 1.1.16 → 1.1.18

package/pages/media-kit/[slug].vue

@@ -22,15 +22,16 @@ const styles = computed(() => kit.value?.content_styles ?? []);
 const brands = computed(() => kit.value?.brands ?? []);
 const period = computed(() => kit.value?.period ?? null);
 const tpl = computed(() => kit.value?.theme || null);
-// Layout emphasis template (premium): creator (default) / performance / commercial / audience
 const template = computed(() => kit.value?.template || 'creator');
 const platforms = computed(() => kit.value?.platforms ?? []);
 const totalFollowers = computed(() => kit.value?.total_followers ?? 0);
+const isPremium = computed(() => kit.value?.is_premium ?? false);
 const mediaKitWall = computed(() => walls.value.find((w: any) => w.show_on_media_kit) ?? null);
 
 const PLATFORM_LABEL: Record<string, string> = {
 	instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube', twitch: 'Twitch', x: 'X',
-	facebook: 'Facebook', kick: 'Kick', discord: 'Discord', telegram: 'Telegram', linkedin: 'LinkedIn', bluesky: 'Bluesky',
+	facebook: 'Facebook', kick: 'Kick', discord: 'Discord', telegram: 'Telegram',
+	linkedin: 'LinkedIn', bluesky: 'Bluesky',
 };
 
 const socials = computed(() => {
@@ -89,24 +90,29 @@ function onDownload() {
 
 		<template v-else>
 			<div class="mk-cover" />
+
 			<div class="kit-wrap mk-sections">
 				<header class="mk-header">
 					<img v-if="streamer.avatar" class="mk-avatar" :src="streamer.avatar" :alt="streamer.name" />
 					<div v-else class="mk-avatar mk-avatar-ph" />
+
 					<div class="mk-hid">
 						<h1>{{ streamer.name }}</h1>
 						<div class="mk-badges">
 							<span v-if="streamer.platform" class="mk-badge plat">{{ streamer.platform }}</span>
 							<span v-if="streamer.tier && streamer.tier !== 'free'" class="mk-badge tier">{{ String(streamer.tier).toUpperCase() }}</span>
+							<span v-if="streamer.slug" class="mk-badge loc">@{{ streamer.slug }}</span>
 						</div>
 						<p v-if="streamer.bio" class="mk-bio">{{ streamer.bio }}</p>
 					</div>
+
 					<div class="mk-actions no-print">
 						<a class="kit-btn kit-btn-primary" @click="onDownload">{{ $t('kit.media.download_pdf') }}</a>
 						<a v-if="streamer.contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">{{ $t('kit.media.contact') }}</a>
 					</div>
 				</header>
 
+				<!-- Reach / multi-platform followers -->
 				<section v-if="platforms.length" class="kit-block" data-sec="reach">
 					<h2>{{ $t('kit.media.reach') }}</h2>
 					<p v-if="totalFollowers" class="mk-total-reach">{{ fmt(totalFollowers) }} <span>{{ $t('kit.media.total_reach') }}</span></p>
@@ -125,6 +131,7 @@ function onDownload() {
 					</div>
 				</section>
 
+				<!-- TV streaming metrics -->
 				<section v-if="stats" class="kit-block" data-sec="metrics">
 					<h2>{{ $t('kit.media.key_metrics') }}</h2>
 					<p v-if="period" class="mk-period">{{ $t('kit.media.last_days', { days: period.days }) }} · {{ period.start }} — {{ period.end }}</p>
@@ -140,41 +147,59 @@ function onDownload() {
 					</div>
 				</section>
 
-				<section v-if="demographics" data-sec="audience" class="kit-block">
+				<!-- Audience demographics -->
+				<section v-if="demographics" class="kit-block" data-sec="audience">
 					<h2>{{ $t('kit.media.audience') }}</h2>
 					<div class="mk-cols2">
-						<div class="kit-card mk-pad" v-if="demographics.age_ranges?.length">
+						<div v-if="demographics.age_ranges?.length" class="kit-card mk-pad">
 							<h3>{{ $t('kit.media.age') }}</h3>
 							<div v-for="a in demographics.age_ranges" :key="a.label" class="mk-bar">
 								<div class="top"><span>{{ a.label }}</span><b>{{ a.percent }}%</b></div>
-								<div class="track"><div class="fill" :style="{ width: a.percent + '%' }" /></div>
+								<div class="mk-track"><div class="mk-fill" :style="{ width: a.percent + '%' }" /></div>
 							</div>
 						</div>
-						<div class="kit-card mk-pad" v-if="demographics.gender">
+						<div v-if="demographics.gender" class="kit-card mk-pad">
 							<h3>{{ $t('kit.media.gender_regions') }}</h3>
 							<div class="mk-gender">
-								<div v-for="(v, k) in demographics.gender" :key="k" class="g"><div class="pct">{{ v }}%</div><div class="lb">{{ k }}</div></div>
+								<div v-for="(v, k) in demographics.gender" :key="k" class="g">
+									<div class="pct">{{ v }}%</div>
+									<div class="lb">{{ k }}</div>
+								</div>
+							</div>
+							<div v-if="demographics.top_countries?.length" class="mk-countries">
+								<div v-for="c in demographics.top_countries" :key="c.code" class="mk-bar">
+									<div class="top"><span>{{ c.label }}</span><b>{{ c.percent }}%</b></div>
+									<div class="mk-track"><div class="mk-fill" :style="{ width: c.percent + '%' }" /></div>
+								</div>
 							</div>
 						</div>
 					</div>
 				</section>
 
-				<section v-if="styles.length" data-sec="styles" class="kit-block">
+				<!-- Content styles / niches -->
+				<section v-if="styles.length" class="kit-block" data-sec="styles">
 					<h2>{{ $t('kit.media.styles') }}</h2>
-					<div class="mk-tags"><span v-for="(s, i) in styles" :key="i" class="mk-tag">{{ s }}</span></div>
+					<div class="mk-tags">
+						<span v-for="(s, i) in styles" :key="i" class="mk-tag" :class="{ on: i < 4 }">{{ s }}</span>
+					</div>
 				</section>
 
-				<section v-if="topGames.length" data-sec="games" class="kit-block">
+				<!-- Top games (TV streamers) -->
+				<section v-if="topGames.length" class="kit-block" data-sec="games">
 					<h2>{{ $t('kit.media.top_games') }}</h2>
 					<div class="mk-games">
 						<div v-for="g in topGames" :key="g.game" class="mk-game">
 							<span class="nm">{{ g.game }}</span>
-							<span class="st"><span>{{ g.hours }}h</span><span>{{ g.avg_viewers }} {{ $t('kit.media.avg_short') }}</span></span>
+							<span class="st">
+								<span>{{ g.hours }}h</span>
+								<span>{{ g.avg_viewers }} {{ $t('kit.media.avg_short') }}</span>
+							</span>
 						</div>
 					</div>
 				</section>
 
-				<section v-if="rateCards.length || bundles.length" data-sec="rates" class="kit-block">
+				<!-- Rate cards & bundles (premium) -->
+				<section v-if="rateCards.length || bundles.length" class="kit-block" data-sec="rates">
 					<h2>{{ $t('kit.media.rates') }}</h2>
 					<div v-if="rateCards.length" class="mk-rates">
 						<div v-for="(r, i) in rateCards" :key="i" class="mk-rate">
@@ -197,12 +222,16 @@ function onDownload() {
 					</div>
 				</section>
 
-				<section v-if="brands.length" data-sec="brands" class="kit-block">
+				<!-- Partner brands -->
+				<section v-if="brands.length" class="kit-block" data-sec="brands">
 					<h2>{{ $t('kit.media.brands') }}</h2>
-					<div class="mk-brands"><div v-for="(b, i) in brands" :key="i" class="mk-brand">{{ b.name || b }}</div></div>
+					<div class="mk-brands">
+						<div v-for="(b, i) in brands" :key="i" class="mk-brand">{{ b.name || b }}</div>
+					</div>
 				</section>
 
-				<section v-if="schedule.length" data-sec="schedule" class="kit-block">
+				<!-- Weekly schedule -->
+				<section v-if="schedule.length" class="kit-block" data-sec="schedule">
 					<h2>{{ $t('kit.media.schedule') }}</h2>
 					<div class="mk-schedule">
 						<div v-for="d in scheduleByDay" :key="d.d" class="mk-day" :class="{ on: d.slot }">
@@ -213,14 +242,18 @@ function onDownload() {
 					</div>
 				</section>
 
-				<section v-if="socials.length" data-sec="connect" class="kit-block no-print">
+				<!-- Social links -->
+				<section v-if="socials.length" class="kit-block no-print" data-sec="connect">
 					<h2>{{ $t('kit.media.connect') }}</h2>
 					<div class="mk-socials">
-						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" @click="track('click')">{{ s.platform }}</a>
+						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" @click="track('click')">
+							{{ s.platform }}
+						</a>
 					</div>
 				</section>
 
-				<section v-if="mediaKitWall" data-sec="support" class="kit-block">
+				<!-- IndieWall / mural -->
+				<section v-if="mediaKitWall" class="kit-block" data-sec="support">
 					<h2>{{ $t('kit.media.support') }}</h2>
 					<div class="mk-indiewall">
 						<div>
@@ -231,112 +264,549 @@ function onDownload() {
 								<div class="s"><div class="v">{{ mediaKitWall.supporters_count ?? 0 }}</div><div class="l">{{ $t('kit.media.supporters') }}</div></div>
 							</div>
 						</div>
-						<a :href="mediaKitWall.mural_url" target="_blank" rel="noopener" class="kit-btn kit-btn-primary">{{ $t('kit.media.view_wall') }}</a>
+						<a :href="mediaKitWall.mural_url" target="_blank" rel="noopener" class="kit-btn kit-btn-primary" @click="track('click')">{{ $t('kit.media.view_wall') }}</a>
 					</div>
 				</section>
 
-				<footer class="mk-footer">{{ $t('kit.media.generated') }} {{ kit.generated_at?.slice(0, 10) }}</footer>
+				<footer class="mk-footer">
+					{{ $t('kit.media.generated') }} <strong>Mundo Gamer</strong> · {{ kit.generated_at?.slice(0, 10) }}
+				</footer>
 			</div>
 		</template>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.kit-media { background: var(--kit-bg); color: var(--kit-text); min-height: 100vh; font-family: 'Inter', system-ui, sans-serif; }
-.kit-state { display: flex; align-items: center; justify-content: center; min-height: 60vh; color: var(--kit-muted); }
-.kit-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; }
-.mk-cover { height: 200px; background: linear-gradient(120deg, var(--kit-accent), #2a0e4e 60%, var(--kit-bg)); }
-
-.mk-header { margin-top: -70px; position: relative; z-index: 2; display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
-.mk-avatar { width: 140px; height: 140px; border: 3px solid var(--kit-accent); object-fit: cover; flex-shrink: 0; background: var(--kit-surface-2); }
-.mk-avatar-ph { background: linear-gradient(135deg, var(--kit-surface-2), var(--kit-accent)); }
-.mk-hid { flex: 1; min-width: 260px; padding-bottom: 6px; }
-.mk-hid h1 { font-family: 'Rajdhani'; font-size: 40px; line-height: 1.05; }
-.mk-badges { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
-.mk-badge { font-family: 'Rajdhani'; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; }
-.mk-badge.plat { background: var(--kit-surface-2); border: 1px solid var(--kit-line); }
-.mk-badge.tier { background: var(--kit-accent); color: var(--kit-accent-ink); }
-.mk-bio { color: #c4c4d2; font-size: 15px; max-width: 60ch; margin-top: 6px; }
-.mk-actions { display: flex; gap: 10px; padding-bottom: 8px; }
-
-.kit-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Rajdhani'; font-weight: 700; font-size: 14px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; text-transform: uppercase; text-decoration: none; }
-.kit-btn-primary { background: var(--kit-accent); color: var(--kit-accent-ink); }
-.kit-btn-ghost { background: rgba(255,255,255,.04); border-color: var(--kit-line); color: var(--kit-text); }
-
-.kit-block { margin-top: 44px; }
-.kit-block > h2 { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--kit-muted); font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
-.kit-block > h2::after { content: ""; flex: 1; height: 1px; background: var(--kit-line); }
-.mk-period { color: var(--kit-muted); font-size: 13px; margin: -8px 0 16px; }
-
-.mk-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
-.mk-metric { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 20px 16px; text-align: center; position: relative; }
-.mk-metric::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--kit-accent); }
-.mk-metric .val { font-family: 'Rajdhani'; font-weight: 700; font-size: 30px; line-height: 1; }
-.mk-metric .val.accent { color: var(--kit-accent); }
-.mk-metric .lab { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); margin-top: 8px; }
-
-.mk-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
-.kit-card { background: var(--kit-surface); border: 1px solid var(--kit-line); }
-.mk-pad { padding: 20px; }
-.mk-pad h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
-.mk-bar { margin-bottom: 12px; }
-.mk-bar .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
-.mk-bar .top b { color: var(--kit-accent); }
-.mk-bar .track { height: 8px; background: var(--kit-surface-2); }
-.mk-bar .fill { height: 100%; background: var(--kit-accent); }
-.mk-gender { display: flex; gap: 16px; }
-.mk-gender .g { flex: 1; text-align: center; background: var(--kit-surface-2); border: 1px solid var(--kit-line); padding: 14px; }
-.mk-gender .pct { font-family: 'Rajdhani'; font-weight: 700; font-size: 26px; color: var(--kit-accent); }
-.mk-gender .lb { font-size: 12px; color: var(--kit-muted); text-transform: uppercase; }
-
-.mk-tags { display: flex; flex-wrap: wrap; gap: 8px; }
-.mk-tag { background: var(--kit-surface-2); border: 1px solid var(--kit-line); padding: 6px 13px; font-size: 13px; }
-
-.mk-games { display: flex; flex-direction: column; gap: 8px; }
-.mk-game { display: flex; align-items: center; justify-content: space-between; background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 12px 16px; }
-.mk-game .nm { font-weight: 600; }
-.mk-game .st { display: flex; gap: 18px; color: var(--kit-muted); font-size: 13px; }
-
-.mk-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
-.mk-rate { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 18px; }
-.mk-rate .fmt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-accent); font-weight: 700; }
-.mk-rate .lb { font-weight: 600; font-size: 16px; margin: 6px 0 10px; font-family: 'Rajdhani'; }
-.mk-rate .price { font-family: 'Rajdhani'; font-weight: 700; font-size: 22px; }
-.mk-rate .dl { font-size: 12px; color: var(--kit-muted); margin-top: 6px; }
-.mk-bundles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
-.mk-bundle { background: linear-gradient(135deg, var(--kit-surface), var(--kit-surface-2)); border: 1px solid var(--kit-accent); padding: 18px; position: relative; }
-.mk-bundle .off { position: absolute; top: 14px; right: 14px; background: var(--kit-accent); color: var(--kit-accent-ink); font-size: 11px; font-weight: 700; padding: 3px 9px; font-family: 'Rajdhani'; }
-.mk-bundle .bn { font-weight: 700; font-size: 17px; font-family: 'Rajdhani'; }
-.mk-bundle .bd { font-size: 13px; color: var(--kit-muted); margin: 4px 0 10px; }
-.mk-bundle .bp { font-family: 'Rajdhani'; font-weight: 700; font-size: 24px; color: var(--kit-accent); }
-.mk-bundle .bp s { color: var(--kit-muted); font-size: 15px; font-weight: 500; margin-left: 8px; }
-.mk-bundle .bundle-items { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
-.mk-bundle .bundle-items li { font-size: 13px; color: #c4c4d2; }
-.mk-bundle .bundle-items li b { color: var(--kit-accent); font-family: 'Rajdhani'; }
-
-.mk-brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
-.mk-brand { aspect-ratio: 5/2; background: var(--kit-surface-2); border: 1px solid var(--kit-line); display: flex; align-items: center; justify-content: center; color: var(--kit-muted); font-family: 'Rajdhani'; font-weight: 700; font-size: 14px; }
-
-.mk-schedule { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
-.mk-day { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 12px 8px; text-align: center; }
-.mk-day.on { border-color: var(--kit-accent); }
-.mk-day .dn { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
-.mk-day.on .dn { color: var(--kit-accent); }
-.mk-day .hr { font-family: 'Rajdhani'; font-weight: 700; margin-top: 6px; font-size: 14px; }
-.mk-day .off { color: var(--kit-muted); opacity: .4; margin-top: 6px; }
-
-.mk-socials { display: flex; flex-wrap: wrap; gap: 10px; }
-.mk-soc { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 9px 16px; font-size: 14px; text-transform: capitalize; }
-
-.mk-indiewall { background: var(--kit-surface); border: 1px solid var(--kit-accent); padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
-.mk-indiewall .iw-name { font-family: 'Rajdhani'; font-weight: 700; font-size: 19px; }
-.mk-indiewall .iw-desc { color: #b4b4c2; font-size: 13px; margin-top: 4px; }
-.mk-indiewall .iw-stats { display: flex; gap: 26px; margin-top: 10px; }
-.mk-indiewall .iw-stats .v { font-family: 'Rajdhani'; font-weight: 700; font-size: 20px; color: var(--kit-accent); }
-.mk-indiewall .iw-stats .l { font-size: 11px; text-transform: uppercase; color: var(--kit-muted); }
-
-.mk-footer { border-top: 1px solid var(--kit-line); margin-top: 48px; padding: 24px 0; text-align: center; color: var(--kit-muted); font-size: 13px; }
+.kit-media {
+	background: var(--kit-bg);
+	color: var(--kit-text);
+	min-height: 100vh;
+	font-family: 'Inter', system-ui, sans-serif;
+	-webkit-font-smoothing: antialiased;
+}
+.kit-state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 60vh;
+	color: var(--kit-muted);
+}
+.kit-wrap {
+	max-width: 1100px;
+	margin: 0 auto;
+	padding: 0 24px 60px;
+}
+
+/* Cover */
+.mk-cover {
+	height: 200px;
+	background: linear-gradient(120deg, var(--kit-accent-2, #6b15ac) 0%, #2a0e4e 50%, var(--kit-bg) 100%);
+	position: relative;
+	border-bottom: 1px solid var(--kit-line);
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background: radial-gradient(circle at 80% 20%, rgba(168, 85, 247, .35), transparent 60%);
+	}
+}
+
+/* Header */
+.mk-header {
+	margin-top: -70px;
+	position: relative;
+	z-index: 2;
+	display: flex;
+	gap: 24px;
+	align-items: flex-end;
+	flex-wrap: wrap;
+}
+.mk-avatar {
+	width: 140px;
+	height: 140px;
+	border: 3px solid var(--kit-accent);
+	object-fit: cover;
+	flex-shrink: 0;
+	background: var(--kit-surface-2);
+}
+.mk-avatar-ph {
+	background: linear-gradient(135deg, var(--kit-accent-2, #6b15ac), var(--kit-accent));
+}
+.mk-hid {
+	flex: 1;
+	min-width: 260px;
+	padding-bottom: 6px;
+
+	h1 {
+		font-family: 'Rajdhani', sans-serif;
+		font-size: 40px;
+		line-height: 1.05;
+	}
+}
+.mk-badges {
+	display: flex;
+	gap: 8px;
+	margin: 8px 0;
+	flex-wrap: wrap;
+}
+.mk-badge {
+	font-family: 'Rajdhani', sans-serif;
+	font-weight: 700;
+	font-size: 11px;
+	letter-spacing: 1.5px;
+	text-transform: uppercase;
+	padding: 4px 10px;
+
+	&.plat { background: var(--kit-surface-2); border: 1px solid var(--kit-line); }
+	&.tier { background: var(--kit-accent); color: var(--kit-accent-ink); }
+	&.loc  { color: var(--kit-muted); border: 1px solid var(--kit-line); }
+}
+.mk-bio {
+	color: #c4c4d2;
+	font-size: 15px;
+	max-width: 60ch;
+	margin-top: 6px;
+}
+.mk-actions {
+	display: flex;
+	gap: 10px;
+	padding-bottom: 8px;
+}
+
+/* Buttons */
+.kit-btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-family: 'Rajdhani', sans-serif;
+	font-weight: 700;
+	font-size: 14px;
+	padding: 11px 20px;
+	cursor: pointer;
+	border: 1px solid transparent;
+	text-transform: uppercase;
+	text-decoration: none;
+	transition: filter .15s, border-color .15s, color .15s;
+
+	&.kit-btn-primary {
+		background: var(--kit-accent);
+		color: var(--kit-accent-ink);
+		&:hover { filter: brightness(1.1); }
+	}
+	&.kit-btn-ghost {
+		background: rgba(255, 255, 255, .04);
+		border-color: var(--kit-line);
+		color: var(--kit-text);
+		&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
+	}
+}
+
+/* Sections */
+.kit-block {
+	margin-top: 44px;
+
+	> h2 {
+		font-size: 13px;
+		letter-spacing: 3px;
+		text-transform: uppercase;
+		color: var(--kit-muted);
+		font-weight: 700;
+		margin-bottom: 16px;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+
+		&::after {
+			content: "";
+			flex: 1;
+			height: 1px;
+			background: var(--kit-line);
+		}
+	}
+}
+.mk-period {
+	color: var(--kit-muted);
+	font-size: 13px;
+	margin: -8px 0 16px;
+}
+
+/* Metrics grid */
+.mk-metrics {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 12px;
+}
+.mk-metric {
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 20px 16px;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0; left: 0;
+		width: 100%;
+		height: 2px;
+		background: var(--kit-accent);
+	}
+
+	.val {
+		font-family: 'Rajdhani', sans-serif;
+		font-weight: 700;
+		font-size: 30px;
+		line-height: 1;
+		&.accent { color: var(--kit-accent); }
+	}
+	.lab {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		color: var(--kit-muted);
+		margin-top: 8px;
+	}
+}
+
+/* Demographics */
+.mk-cols2 {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 24px;
+}
+.kit-card {
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+}
+.mk-pad {
+	padding: 20px;
+
+	h3 {
+		font-size: 14px;
+		font-weight: 700;
+		margin-bottom: 14px;
+		letter-spacing: .5px;
+	}
+}
+.mk-bar {
+	margin-bottom: 12px;
+
+	.top {
+		display: flex;
+		justify-content: space-between;
+		font-size: 13px;
+		margin-bottom: 5px;
+
+		b { color: var(--kit-accent); font-weight: 600; }
+	}
+}
+.mk-track {
+	height: 8px;
+	background: var(--kit-surface-2);
+}
+.mk-fill {
+	height: 100%;
+	background: linear-gradient(90deg, var(--kit-accent-2, #6b15ac), var(--kit-accent));
+}
+.mk-gender {
+	display: flex;
+	gap: 16px;
+	margin-top: 4px;
+
+	.g {
+		flex: 1;
+		text-align: center;
+		background: var(--kit-surface-2);
+		border: 1px solid var(--kit-line);
+		padding: 14px;
+
+		.pct {
+			font-family: 'Rajdhani', sans-serif;
+			font-weight: 700;
+			font-size: 26px;
+			color: var(--kit-accent);
+		}
+		.lb {
+			font-size: 12px;
+			color: var(--kit-muted);
+			text-transform: uppercase;
+			letter-spacing: 1px;
+		}
+	}
+}
+.mk-countries { margin-top: 14px; }
+
+/* Tags */
+.mk-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.mk-tag {
+	background: var(--kit-surface-2);
+	border: 1px solid var(--kit-line);
+	padding: 6px 13px;
+	font-size: 13px;
+	color: #d4d4e0;
+
+	&.on {
+		border-color: var(--kit-accent);
+		color: var(--kit-accent);
+	}
+}
+
+/* Top games */
+.mk-games {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.mk-game {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 12px 16px;
+
+	.nm { font-weight: 600; }
+	.st { display: flex; gap: 18px; color: var(--kit-muted); font-size: 13px; }
+}
+
+/* Rate cards */
+.mk-rates {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 12px;
+}
+.mk-rate {
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 18px;
+
+	.fmt  { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-accent); font-weight: 700; }
+	.lb   { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 16px; margin: 6px 0 10px; }
+	.price{ font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; }
+	.dl   { font-size: 12px; color: var(--kit-muted); margin-top: 6px; }
+}
 
+/* Bundles */
+.mk-bundles {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 12px;
+	margin-top: 12px;
+}
+.mk-bundle {
+	background: linear-gradient(135deg, var(--kit-surface), var(--kit-surface-2));
+	border: 1px solid var(--kit-accent);
+	padding: 18px;
+	position: relative;
+
+	.off {
+		position: absolute;
+		top: 14px; right: 14px;
+		background: var(--kit-accent);
+		color: var(--kit-accent-ink);
+		font-size: 11px;
+		font-weight: 700;
+		padding: 3px 9px;
+		font-family: 'Rajdhani', sans-serif;
+		letter-spacing: 1px;
+	}
+	.bn { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; }
+	.bd { font-size: 13px; color: var(--kit-muted); margin: 4px 0 10px; }
+	.bp {
+		font-family: 'Rajdhani', sans-serif;
+		font-weight: 700;
+		font-size: 24px;
+		color: var(--kit-accent);
+
+		s { color: var(--kit-muted); font-size: 15px; font-weight: 500; margin-left: 8px; }
+	}
+	.bundle-items {
+		list-style: none;
+		padding: 0;
+		margin: 0 0 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		li { font-size: 13px; color: #c4c4d2; }
+		li b { color: var(--kit-accent); font-family: 'Rajdhani', sans-serif; }
+	}
+}
+
+/* Brands */
+.mk-brands {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 10px;
+}
+.mk-brand {
+	aspect-ratio: 5 / 2;
+	background: var(--kit-surface-2);
+	border: 1px solid var(--kit-line);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--kit-muted);
+	font-family: 'Rajdhani', sans-serif;
+	font-weight: 700;
+	font-size: 14px;
+	letter-spacing: 1px;
+}
+
+/* Schedule */
+.mk-schedule {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 8px;
+}
+.mk-day {
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 12px 8px;
+	text-align: center;
+
+	&.on { border-color: var(--kit-accent); }
+	&.on .dn { color: var(--kit-accent); }
+
+	.dn  { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
+	.hr  { font-family: 'Rajdhani', sans-serif; font-weight: 700; margin-top: 6px; font-size: 14px; }
+	.off { color: var(--kit-muted); opacity: .4; margin-top: 6px; }
+}
+
+/* Socials */
+.mk-socials {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+.mk-soc {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 9px 16px;
+	font-size: 14px;
+	text-transform: capitalize;
+	color: #d4d4e0;
+	text-decoration: none;
+	transition: border-color .15s, color .15s;
+
+	&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
+}
+
+/* IndieWall */
+.mk-indiewall {
+	background: linear-gradient(120deg, rgba(168, 85, 247, .1), rgba(107, 21, 172, .05));
+	border: 1px solid var(--kit-accent);
+	padding: 24px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 20px;
+	flex-wrap: wrap;
+
+	.iw-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; }
+	.iw-desc { color: #b4b4c2; font-size: 13px; margin-top: 4px; }
+	.iw-stats { display: flex; gap: 26px; margin-top: 10px; }
+	.iw-stats .v { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; color: var(--kit-accent); }
+	.iw-stats .l { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
+}
+
+/* Reach / platform breakdown */
+.mk-total-reach {
+	font-family: 'Rajdhani', sans-serif;
+	font-weight: 700;
+	font-size: 28px;
+	color: var(--kit-accent);
+	margin: -8px 0 16px;
+
+	span {
+		font-family: 'Inter', sans-serif;
+		font-size: 13px;
+		color: var(--kit-muted);
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
+}
+.mk-platforms {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 12px;
+}
+.mk-platform {
+	background: var(--kit-surface);
+	border: 1px solid var(--kit-line);
+	padding: 16px;
+	text-decoration: none;
+	color: inherit;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	transition: border-color .15s;
+
+	&:hover { border-color: var(--kit-accent); }
+
+	.pl-head     { display: flex; align-items: center; justify-content: space-between; }
+	.pl-name     { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
+	.pl-verified { color: #27ae60; font-weight: 700; }
+	.pl-followers{ font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 24px; }
+	.pl-meta     { display: flex; gap: 12px; font-size: 12px; color: var(--kit-muted); flex-wrap: wrap; }
+}
+
+/* Footer */
+.mk-footer {
+	border-top: 1px solid var(--kit-line);
+	margin-top: 48px;
+	padding: 24px 0;
+	text-align: center;
+	color: var(--kit-muted);
+	font-size: 13px;
+
+	strong { color: var(--kit-accent); font-weight: 700; }
+}
+
+/* Template ordering (layout emphasis) */
+.mk-sections { display: flex; flex-direction: column; }
+.mk-sections > .mk-header { order: 0; }
+.mk-sections > .mk-footer { order: 100; }
+.mk-sections > [data-sec="reach"]    { order: 1; }
+.mk-sections > [data-sec="metrics"]  { order: 2; }
+.mk-sections > [data-sec="audience"] { order: 3; }
+.mk-sections > [data-sec="styles"]   { order: 4; }
+.mk-sections > [data-sec="games"]    { order: 5; }
+.mk-sections > [data-sec="rates"]    { order: 6; }
+.mk-sections > [data-sec="brands"]   { order: 7; }
+.mk-sections > [data-sec="schedule"] { order: 8; }
+.mk-sections > [data-sec="connect"]  { order: 9; }
+.mk-sections > [data-sec="support"]  { order: 10; }
+
+[data-template="performance"] {
+	.mk-sections > [data-sec="metrics"]  { order: 1; }
+	.mk-sections > [data-sec="reach"]    { order: 2; }
+	.mk-sections > [data-sec="games"]    { order: 3; }
+}
+[data-template="commercial"] {
+	.mk-sections > [data-sec="reach"]    { order: 1; }
+	.mk-sections > [data-sec="rates"]    { order: 2; }
+	.mk-sections > [data-sec="brands"]   { order: 3; }
+	.mk-sections > [data-sec="metrics"]  { order: 4; }
+}
+[data-template="audience"] {
+	.mk-sections > [data-sec="reach"]    { order: 1; }
+	.mk-sections > [data-sec="audience"] { order: 2; }
+	.mk-sections > [data-sec="styles"]   { order: 3; }
+	.mk-sections > [data-sec="metrics"]  { order: 4; }
+}
+
+/* Responsive */
 @media (max-width: 840px) {
 	.mk-metrics { grid-template-columns: repeat(2, 1fr); }
 	.mk-cols2, .mk-rates, .mk-bundles { grid-template-columns: 1fr; }
@@ -344,41 +814,8 @@ function onDownload() {
 	.mk-schedule { grid-template-columns: repeat(4, 1fr); }
 	.mk-header { flex-direction: column; align-items: flex-start; }
 }
-@media print { .no-print { display: none !important; } }
 
-/* Reach / platform breakdown */
-.mk-total-reach { font-family: 'Rajdhani'; font-weight: 700; font-size: 28px; color: var(--kit-accent); margin: -8px 0 16px; }
-.mk-total-reach span { font-family: 'Inter'; font-size: 13px; color: var(--kit-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
-.mk-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
-.mk-platform { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
-.mk-platform:hover { border-color: var(--kit-accent); }
-.mk-platform .pl-head { display: flex; align-items: center; justify-content: space-between; }
-.mk-platform .pl-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
-.mk-platform .pl-verified { color: #27ae60; font-weight: 700; }
-.mk-platform .pl-followers { font-family: 'Rajdhani'; font-weight: 700; font-size: 24px; }
-.mk-platform .pl-meta { display: flex; gap: 12px; font-size: 12px; color: var(--kit-muted); flex-wrap: wrap; }
-
-/* Template = layout emphasis (section order). Default DOM order = Creator. */
-.mk-sections { display: flex; flex-direction: column; }
-.mk-sections > .mk-header { order: 0; }
-.mk-sections > .mk-footer { order: 100; }
-.mk-sections > [data-sec="reach"]{order:1} .mk-sections > [data-sec="metrics"]{order:2}
-.mk-sections > [data-sec="audience"]{order:3} .mk-sections > [data-sec="styles"]{order:4}
-.mk-sections > [data-sec="games"]{order:5} .mk-sections > [data-sec="rates"]{order:6}
-.mk-sections > [data-sec="brands"]{order:7} .mk-sections > [data-sec="schedule"]{order:8}
-.mk-sections > [data-sec="connect"]{order:9} .mk-sections > [data-sec="support"]{order:10}
-
-[data-template="performance"] .mk-sections > [data-sec="metrics"]{order:1}
-[data-template="performance"] .mk-sections > [data-sec="reach"]{order:2}
-[data-template="performance"] .mk-sections > [data-sec="games"]{order:3}
-
-[data-template="commercial"] .mk-sections > [data-sec="reach"]{order:1}
-[data-template="commercial"] .mk-sections > [data-sec="rates"]{order:2}
-[data-template="commercial"] .mk-sections > [data-sec="brands"]{order:3}
-[data-template="commercial"] .mk-sections > [data-sec="metrics"]{order:4}
-
-[data-template="audience"] .mk-sections > [data-sec="reach"]{order:1}
-[data-template="audience"] .mk-sections > [data-sec="audience"]{order:2}
-[data-template="audience"] .mk-sections > [data-sec="styles"]{order:3}
-[data-template="audience"] .mk-sections > [data-sec="metrics"]{order:4}
+@media print {
+	.no-print { display: none !important; }
+}
 </style>