From b85fab79e40b0f5e6c7e137d994e203f425eab8f Mon Sep 17 00:00:00 2001
From: Sunny Patel <sunnypatel124555@gmail.com>
Date: Thu, 5 Mar 2026 21:34:24 -0500
Subject: [PATCH 1/2] feat(share): added LinkedIn share badge with SVG
 certificate and social sharing

- shareable SVG badge with score, name, and branding
- SVG to PNG download via canvas API
- LinkedIn share post and add-to-profile via URL schemes
- copy-to-clipboard for pre-drafted LinkedIn post text
---
 .../components/scoring/ScoreDashboard.svelte  |  62 +-
 src/lib/components/scoring/ShareBadge.svelte  | 695 ++++++++++++++++++
 2 files changed, 740 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/scoring/ShareBadge.svelte

diff --git a/src/lib/components/scoring/ScoreDashboard.svelte b/src/lib/components/scoring/ScoreDashboard.svelte
index 5407707..cdaa6a1 100644
--- a/src/lib/components/scoring/ScoreDashboard.svelte
+++ b/src/lib/components/scoring/ScoreDashboard.svelte
@@ -5,6 +5,7 @@
 	import KeywordAnalysis from './KeywordAnalysis.svelte';
 	import WeakestAreas from './WeakestAreas.svelte';
 	import ResumeStats from './ResumeStats.svelte';
+	import ShareBadge from './ShareBadge.svelte';
 	import type { Suggestion, StructuredSuggestion } from '$engine/scorer/types';
 
 	// derived stats for the summary card header
@@ -14,6 +15,7 @@
 
 	// toggle between grid cards and detailed breakdown view
 	let activeView = $state<'cards' | 'detailed'>('cards');
+	let showShareBadge = $state(false);
 
 	// collapsible suggestion cards
 	let expandedSuggestion = $state<number | null>(null);
@@ -281,21 +283,40 @@
 				</button>
 			</div>
 
-			<button class="export-btn" onclick={exportResults} title="Export results as JSON">
-				<svg
-					width="16"
-					height="16"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-				>
-					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-					<polyline points="7,10 12,15 17,10" />
-					<line x1="12" y1="15" x2="12" y2="3" />
-				</svg>
-				Export
-			</button>
+			<div class="toolbar-actions">
+				<button class="toolbar-btn" onclick={() => (showShareBadge = true)} title="Share score badge">
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<circle cx="18" cy="5" r="3" />
+						<circle cx="6" cy="12" r="3" />
+						<circle cx="18" cy="19" r="3" />
+						<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+						<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+					</svg>
+					Share
+				</button>
+				<button class="toolbar-btn" onclick={exportResults} title="Export results as JSON">
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+						<polyline points="7,10 12,15 17,10" />
+						<line x1="12" y1="15" x2="12" y2="3" />
+					</svg>
+					Export
+				</button>
+			</div>
 		</div>
 
 		<!-- card view: 6 ATS score cards in a grid -->
@@ -423,6 +444,8 @@
 	</div>
 {/if}
 
+<ShareBadge bind:open={showShareBadge} />
+
 <style>
 	.dashboard {
 		margin-top: 2rem;
@@ -669,7 +692,12 @@
 		gap: 1rem;
 	}
 
-	.export-btn {
+	.toolbar-actions {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.toolbar-btn {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.4rem;
@@ -688,7 +716,7 @@
 			background 0.2s ease;
 	}
 
-	.export-btn:hover {
+	.toolbar-btn:hover {
 		border-color: rgba(6, 182, 212, 0.3);
 		color: var(--accent-cyan);
 		background: rgba(6, 182, 212, 0.05);
diff --git a/src/lib/components/scoring/ShareBadge.svelte b/src/lib/components/scoring/ShareBadge.svelte
new file mode 100644
index 0000000..d0b9b32
--- /dev/null
+++ b/src/lib/components/scoring/ShareBadge.svelte
@@ -0,0 +1,695 @@
+<script lang="ts">
+	import { scoresStore } from '$stores/scores.svelte';
+	import { authStore } from '$stores/auth.svelte';
+
+	let { open = $bindable(false) }: { open: boolean } = $props();
+
+	let copied = $state(false);
+	let badgeSvgEl: SVGSVGElement | undefined = $state();
+
+	const avgScore = $derived(scoresStore.averageScore);
+	const passCount = $derived(scoresStore.passingCount);
+	const totalCount = $derived(scoresStore.results.length);
+	const mode = $derived(scoresStore.mode);
+	const displayName = $derived(authStore.displayName || 'Resume Candidate');
+
+	const scanDate = $derived(
+		new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+	);
+	const modeLabel = $derived(mode === 'targeted' ? 'Targeted Scoring' : 'General Readiness');
+
+	function getScoreColor(score: number): string {
+		if (score >= 80) return '#22c55e';
+		if (score >= 60) return '#eab308';
+		if (score >= 40) return '#f97316';
+		return '#ef4444';
+	}
+
+	function getScoreLabel(score: number): string {
+		if (score >= 80) return 'Excellent';
+		if (score >= 60) return 'Good';
+		if (score >= 40) return 'Needs Work';
+		return 'Poor';
+	}
+
+	const scoreColor = $derived(getScoreColor(avgScore));
+	const scoreLabel = $derived(getScoreLabel(avgScore));
+
+	// circumference for the score ring (radius 58)
+	const circumference = 2 * Math.PI * 58;
+	const dashOffset = $derived(circumference - (avgScore / 100) * circumference);
+
+	const shareText = $derived(
+		`Just scored ${avgScore}/100 on ATS Screener, a free open-source tool that simulates how real ATS platforms like Workday, Taleo, and Greenhouse parse your resume.\n\n${passCount}/${totalCount} systems passed. Check yours at ats-screener.vercel.app`
+	);
+
+	function close() {
+		open = false;
+		copied = false;
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) close();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') close();
+	}
+
+	function autoFocus(node: HTMLElement) {
+		node.focus();
+	}
+
+	function downloadBadge() {
+		if (!badgeSvgEl) return;
+
+		const svgData = new XMLSerializer().serializeToString(badgeSvgEl);
+		const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+		const url = URL.createObjectURL(svgBlob);
+
+		const img = new Image();
+		img.onload = () => {
+			const canvas = document.createElement('canvas');
+			canvas.width = img.width * 2;
+			canvas.height = img.height * 2;
+			const ctx = canvas.getContext('2d')!;
+			ctx.scale(2, 2);
+			ctx.drawImage(img, 0, 0);
+
+			canvas.toBlob((blob) => {
+				if (!blob) return;
+				const a = document.createElement('a');
+				a.href = URL.createObjectURL(blob);
+				a.download = `ats-badge-${avgScore}-${new Date().toISOString().slice(0, 10)}.png`;
+				a.click();
+				URL.revokeObjectURL(a.href);
+			}, 'image/png');
+
+			URL.revokeObjectURL(url);
+		};
+		img.src = url;
+	}
+
+	function shareToLinkedIn() {
+		const url = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent('https://ats-screener.vercel.app')}`;
+		window.open(url, '_blank', 'noopener,noreferrer');
+	}
+
+	function addToLinkedInProfile() {
+		const d = new Date();
+		const year = d.getFullYear();
+		const month = d.getMonth() + 1;
+		const url = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${encodeURIComponent('ATS Screening Report')}&organizationName=${encodeURIComponent('ATS Screener')}&issueYear=${year}&issueMonth=${month}&certUrl=${encodeURIComponent('https://ats-screener.vercel.app')}`;
+		window.open(url, '_blank', 'noopener,noreferrer');
+	}
+
+	async function copyShareText() {
+		try {
+			await navigator.clipboard.writeText(shareText);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			// fallback
+			const ta = document.createElement('textarea');
+			ta.value = shareText;
+			ta.style.position = 'fixed';
+			ta.style.opacity = '0';
+			document.body.appendChild(ta);
+			ta.select();
+			document.execCommand('copy');
+			document.body.removeChild(ta);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		}
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="badge-overlay" onclick={handleBackdropClick} onkeydown={handleKeydown} tabindex="-1" use:autoFocus>
+		<div class="badge-dialog" role="dialog" aria-label="Share badge">
+			<button class="close-btn" onclick={close} aria-label="Close">
+				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			</button>
+
+			<div class="badge-content">
+				<h2 class="dialog-title">Share Your Score</h2>
+				<p class="dialog-subtitle">Download your badge or share directly to LinkedIn</p>
+
+				<!-- badge preview -->
+				<div class="badge-preview">
+					<svg
+						bind:this={badgeSvgEl}
+						xmlns="http://www.w3.org/2000/svg"
+						width="600"
+						height="820"
+						viewBox="0 0 600 820"
+						class="badge-svg"
+					>
+						<defs>
+							<linearGradient id="badge-bgGrad" x1="0" y1="0" x2="1" y2="1">
+								<stop offset="0%" stop-color="#0a0a1a" />
+								<stop offset="50%" stop-color="#0d0d28" />
+								<stop offset="100%" stop-color="#0a0a1a" />
+							</linearGradient>
+							<linearGradient id="badge-accentGrad" x1="0" y1="0" x2="1" y2="1">
+								<stop offset="0%" stop-color="#06b6d4" />
+								<stop offset="50%" stop-color="#3b82f6" />
+								<stop offset="100%" stop-color="#8b5cf6" />
+							</linearGradient>
+							<linearGradient id="badge-scoreGlow" x1="0" y1="0" x2="0" y2="1">
+								<stop offset="0%" stop-color={scoreColor} stop-opacity="0.4" />
+								<stop offset="100%" stop-color={scoreColor} stop-opacity="0" />
+							</linearGradient>
+							<filter id="badge-glassBlur">
+								<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
+							</filter>
+							<filter id="badge-glow">
+								<feGaussianBlur stdDeviation="6" result="blur" />
+								<feMerge>
+									<feMergeNode in="blur" />
+									<feMergeNode in="SourceGraphic" />
+								</feMerge>
+							</filter>
+							<clipPath id="badge-cardClip">
+								<rect x="0" y="0" width="600" height="820" rx="32" ry="32" />
+							</clipPath>
+						</defs>
+
+						<!-- card background -->
+						<rect width="600" height="820" rx="32" ry="32" fill="url(#badge-bgGrad)" />
+
+						<!-- subtle grid pattern -->
+						<g opacity="0.03" clip-path="url(#badge-cardClip)">
+							{#each Array(20) as _, i}
+								<line x1="0" y1={i * 42} x2="600" y2={i * 42} stroke="white" stroke-width="0.5" />
+								<line x1={i * 32} y1="0" x2={i * 32} y2="820" stroke="white" stroke-width="0.5" />
+							{/each}
+						</g>
+
+						<!-- top accent bar gradient -->
+						<rect x="0" y="0" width="600" height="4" rx="0" fill="url(#badge-accentGrad)" clip-path="url(#badge-cardClip)" />
+
+						<!-- decorative corner accents -->
+						<circle cx="540" cy="60" r="120" fill="#06b6d4" opacity="0.03" />
+						<circle cx="60" cy="760" r="100" fill="#8b5cf6" opacity="0.03" />
+
+						<!-- branding header -->
+						<g transform="translate(300, 60)">
+							<!-- shield icon -->
+							<g transform="translate(-10, 0)">
+								<path
+									d="M0-16 L-10-10 L-10 2 C-10 10 0 16 0 16 C0 16 10 10 10 2 L10-10 Z"
+									fill="none"
+									stroke="url(#badge-accentGrad)"
+									stroke-width="1.5"
+									opacity="0.8"
+								/>
+								<path
+									d="M-4 0 L-1 3 L5 -3"
+									fill="none"
+									stroke="#06b6d4"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</g>
+							<text
+								x="16"
+								y="5"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="16"
+								font-weight="700"
+								fill="rgba(255,255,255,0.9)"
+								text-anchor="start"
+								letter-spacing="0.08em"
+							>ATS SCREENER</text>
+						</g>
+
+						<!-- divider -->
+						<line x1="100" y1="95" x2="500" y2="95" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+
+						<!-- score ring section -->
+						<g transform="translate(300, 250)">
+							<!-- outer glow ring -->
+							<circle cx="0" cy="0" r="80" fill="none" stroke={scoreColor} stroke-width="1" opacity="0.1" />
+
+							<!-- background track -->
+							<circle
+								cx="0"
+								cy="0"
+								r="58"
+								fill="none"
+								stroke="rgba(255,255,255,0.05)"
+								stroke-width="8"
+							/>
+
+							<!-- score progress arc -->
+							<circle
+								cx="0"
+								cy="0"
+								r="58"
+								fill="none"
+								stroke={scoreColor}
+								stroke-width="8"
+								stroke-dasharray={circumference}
+								stroke-dashoffset={dashOffset}
+								stroke-linecap="round"
+								transform="rotate(-90)"
+								filter="url(#badge-glow)"
+							/>
+
+							<!-- score number -->
+							<text
+								x="0"
+								y="-8"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="56"
+								font-weight="800"
+								fill={scoreColor}
+								text-anchor="middle"
+								dominant-baseline="central"
+							>{avgScore}</text>
+
+							<!-- /100 label -->
+							<text
+								x="0"
+								y="28"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="14"
+								font-weight="500"
+								fill="rgba(255,255,255,0.35)"
+								text-anchor="middle"
+							>/ 100</text>
+						</g>
+
+						<!-- verdict -->
+						<text
+							x="300"
+							y="365"
+							font-family="system-ui, -apple-system, sans-serif"
+							font-size="22"
+							font-weight="700"
+							fill={scoreColor}
+							text-anchor="middle"
+							letter-spacing="0.06em"
+						>{scoreLabel.toUpperCase()}</text>
+
+						<!-- systems passed pill -->
+						<g transform="translate(300, 405)">
+							<rect x="-70" y="-16" width="140" height="32" rx="16" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+							<text
+								x="0"
+								y="1"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="13"
+								font-weight="600"
+								fill="rgba(255,255,255,0.7)"
+								text-anchor="middle"
+								dominant-baseline="central"
+							>{passCount}/{totalCount} Systems Passed</text>
+						</g>
+
+						<!-- divider -->
+						<line x1="120" y1="455" x2="480" y2="455" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+
+						<!-- details section -->
+						<!-- name -->
+						<g transform="translate(300, 500)">
+							<text
+								x="0"
+								y="0"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="11"
+								font-weight="600"
+								fill="rgba(255,255,255,0.3)"
+								text-anchor="middle"
+								letter-spacing="0.12em"
+							>CANDIDATE</text>
+							<text
+								x="0"
+								y="26"
+								font-family="system-ui, -apple-system, sans-serif"
+								font-size="20"
+								font-weight="600"
+								fill="rgba(255,255,255,0.9)"
+								text-anchor="middle"
+							>{displayName}</text>
+						</g>
+
+						<!-- mode + date row -->
+						<g transform="translate(300, 575)">
+							<!-- mode -->
+							<g transform="translate(-100, 0)">
+								<text
+									x="0"
+									y="0"
+									font-family="system-ui, -apple-system, sans-serif"
+									font-size="10"
+									font-weight="600"
+									fill="rgba(255,255,255,0.3)"
+									text-anchor="middle"
+									letter-spacing="0.1em"
+								>MODE</text>
+								<text
+									x="0"
+									y="22"
+									font-family="system-ui, -apple-system, sans-serif"
+									font-size="14"
+									font-weight="500"
+									fill="#06b6d4"
+									text-anchor="middle"
+								>{modeLabel}</text>
+							</g>
+							<!-- date -->
+							<g transform="translate(100, 0)">
+								<text
+									x="0"
+									y="0"
+									font-family="system-ui, -apple-system, sans-serif"
+									font-size="10"
+									font-weight="600"
+									fill="rgba(255,255,255,0.3)"
+									text-anchor="middle"
+									letter-spacing="0.1em"
+								>SCAN DATE</text>
+								<text
+									x="0"
+									y="22"
+									font-family="system-ui, -apple-system, sans-serif"
+									font-size="14"
+									font-weight="500"
+									fill="rgba(255,255,255,0.7)"
+									text-anchor="middle"
+								>{scanDate}</text>
+							</g>
+						</g>
+
+						<!-- individual system scores -->
+						<g transform="translate(300, 640)">
+							{#each scoresStore.results as result, i}
+								{@const col = i % 3}
+								{@const row = Math.floor(i / 3)}
+								{@const x = (col - 1) * 160}
+								{@const y = row * 36}
+								<g transform="translate({x}, {y})">
+									<rect
+										x="-68"
+										y="-12"
+										width="136"
+										height="24"
+										rx="6"
+										fill="rgba(255,255,255,0.02)"
+									/>
+									<text
+										x="-58"
+										y="1"
+										font-family="system-ui, -apple-system, sans-serif"
+										font-size="10"
+										font-weight="500"
+										fill="rgba(255,255,255,0.5)"
+										dominant-baseline="central"
+									>{result.system}</text>
+									<text
+										x="58"
+										y="1"
+										font-family="system-ui, -apple-system, sans-serif"
+										font-size="11"
+										font-weight="700"
+										fill={getScoreColor(result.overallScore)}
+										text-anchor="end"
+										dominant-baseline="central"
+									>{result.overallScore}</text>
+								</g>
+							{/each}
+						</g>
+
+						<!-- footer -->
+						<line x1="80" y1="730" x2="520" y2="730" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+
+						<text
+							x="300"
+							y="760"
+							font-family="system-ui, -apple-system, sans-serif"
+							font-size="12"
+							font-weight="500"
+							fill="#06b6d4"
+							text-anchor="middle"
+							opacity="0.7"
+						>ats-screener.vercel.app</text>
+
+						<text
+							x="300"
+							y="785"
+							font-family="system-ui, -apple-system, sans-serif"
+							font-size="9"
+							font-weight="400"
+							fill="rgba(255,255,255,0.2)"
+							text-anchor="middle"
+						>Not an official ATS certification</text>
+					</svg>
+				</div>
+
+				<!-- action buttons -->
+				<div class="badge-actions">
+					<button class="action-btn primary" onclick={downloadBadge}>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+							<polyline points="7,10 12,15 17,10" />
+							<line x1="12" y1="15" x2="12" y2="3" />
+						</svg>
+						Download Badge
+					</button>
+
+					<button class="action-btn linkedin" onclick={shareToLinkedIn}>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+							<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+						</svg>
+						Share to LinkedIn
+					</button>
+
+					<button class="action-btn secondary" onclick={addToLinkedInProfile}>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="12" cy="12" r="10" />
+							<line x1="12" y1="8" x2="12" y2="16" />
+							<line x1="8" y1="12" x2="16" y2="12" />
+						</svg>
+						Add to LinkedIn Profile
+					</button>
+
+					<button class="action-btn secondary" onclick={copyShareText}>
+						{#if copied}
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2">
+								<polyline points="20,6 9,17 4,12" />
+							</svg>
+							<span class="copied-text">Copied!</span>
+						{:else}
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+								<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+							</svg>
+							Copy Share Text
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.badge-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		background: rgba(0, 0, 0, 0.65);
+		backdrop-filter: blur(4px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		animation: overlayIn 0.2s ease;
+	}
+
+	@keyframes overlayIn {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	.badge-dialog {
+		position: relative;
+		width: 100%;
+		max-width: 520px;
+		max-height: 90vh;
+		overflow-y: auto;
+		background: rgba(18, 18, 30, 0.98);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 24px;
+		backdrop-filter: blur(24px);
+		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+		animation: dialogIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	@keyframes dialogIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95) translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	.close-btn {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		background: rgba(255, 255, 255, 0.05);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 50%;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-tertiary);
+		cursor: pointer;
+		transition: color 0.2s ease, background 0.2s ease;
+		z-index: 1;
+	}
+
+	.close-btn:hover {
+		color: var(--text-primary);
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.badge-content {
+		padding: 2rem;
+	}
+
+	.dialog-title {
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0 0 0.25rem 0;
+	}
+
+	.dialog-subtitle {
+		font-size: 0.85rem;
+		color: var(--text-tertiary);
+		margin: 0 0 1.5rem 0;
+	}
+
+	.badge-preview {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1.5rem;
+		padding: 1rem;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 16px;
+	}
+
+	.badge-svg {
+		width: 100%;
+		max-width: 360px;
+		height: auto;
+	}
+
+	.badge-actions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.action-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.7rem 1rem;
+		border-radius: 12px;
+		font-size: 0.85rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		font-family: inherit;
+		border: 1px solid transparent;
+	}
+
+	.action-btn.primary {
+		background: rgba(6, 182, 212, 0.12);
+		border-color: rgba(6, 182, 212, 0.25);
+		color: #06b6d4;
+	}
+
+	.action-btn.primary:hover {
+		background: rgba(6, 182, 212, 0.2);
+		border-color: rgba(6, 182, 212, 0.4);
+		box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
+	}
+
+	.action-btn.linkedin {
+		background: rgba(10, 102, 194, 0.15);
+		border-color: rgba(10, 102, 194, 0.3);
+		color: #0a66c2;
+	}
+
+	.action-btn.linkedin:hover {
+		background: rgba(10, 102, 194, 0.25);
+		border-color: rgba(10, 102, 194, 0.45);
+		box-shadow: 0 0 20px rgba(10, 102, 194, 0.1);
+	}
+
+	.action-btn.secondary {
+		background: rgba(255, 255, 255, 0.04);
+		border-color: rgba(255, 255, 255, 0.08);
+		color: var(--text-secondary);
+	}
+
+	.action-btn.secondary:hover {
+		background: rgba(255, 255, 255, 0.08);
+		border-color: rgba(255, 255, 255, 0.15);
+	}
+
+	.copied-text {
+		color: #22c55e;
+	}
+
+	/* scrollbar styling for the dialog */
+	.badge-dialog::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.badge-dialog::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.badge-dialog::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 2px;
+	}
+
+	@media (max-width: 640px) {
+		.badge-overlay {
+			padding: 0.5rem;
+		}
+
+		.badge-dialog {
+			max-width: none;
+			border-radius: 20px;
+		}
+
+		.badge-content {
+			padding: 1.5rem;
+		}
+
+		.badge-preview {
+			padding: 0.5rem;
+		}
+	}
+</style>

From 737edbf70a7ad2d4b91b59a87d2dc53914829ee0 Mon Sep 17 00:00:00 2001
From: Sunny Patel <sunnypatel124555@gmail.com>
Date: Thu, 5 Mar 2026 22:05:05 -0500
Subject: [PATCH 2/2] fix(share): improved LinkedIn badge UX and removed JSON
 export

- redesigned badge SVG with gradient border frame, verification seal watermark, and tighter proportions (520x720)
- LinkedIn share now pre-populates post text with all 6 ATS platforms and hashtags via feed intent URL
- LinkedIn profile link (linkedin.com/in/sunny-patel-30b460204) included for attribution
- download filename: "Name - ATS Screener Badge - Month Day Year.png" (cross-platform safe)
- removed copy share text button and JSON export button from dashboard
- removed unused copied state, copyShareText function, exportResults function
---
 .../components/scoring/ScoreDashboard.svelte  |  34 ---
 src/lib/components/scoring/ShareBadge.svelte  | 287 ++++++++----------
 2 files changed, 124 insertions(+), 197 deletions(-)

diff --git a/src/lib/components/scoring/ScoreDashboard.svelte b/src/lib/components/scoring/ScoreDashboard.svelte
index cdaa6a1..6504de5 100644
--- a/src/lib/components/scoring/ScoreDashboard.svelte
+++ b/src/lib/components/scoring/ScoreDashboard.svelte
@@ -51,25 +51,6 @@
 		return suggestions.slice(0, 5);
 	});
 
-	// exports results as a JSON file download
-	function exportResults() {
-		const data = {
-			exportedAt: new Date().toISOString(),
-			mode: scoresStore.mode,
-			averageScore: avgScore,
-			passingCount: passCount,
-			totalSystems: totalCount,
-			results: scoresStore.results
-		};
-		const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = `ats-scores-${new Date().toISOString().slice(0, 10)}.json`;
-		a.click();
-		URL.revokeObjectURL(url);
-	}
-
 	// color based on average score
 	function getAvgColor(score: number): string {
 		if (score >= 80) return '#22c55e';
@@ -301,21 +282,6 @@
 					</svg>
 					Share
 				</button>
-				<button class="toolbar-btn" onclick={exportResults} title="Export results as JSON">
-					<svg
-						width="16"
-						height="16"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-					>
-						<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-						<polyline points="7,10 12,15 17,10" />
-						<line x1="12" y1="15" x2="12" y2="3" />
-					</svg>
-					Export
-				</button>
 			</div>
 		</div>
 
diff --git a/src/lib/components/scoring/ShareBadge.svelte b/src/lib/components/scoring/ShareBadge.svelte
index d0b9b32..db9a4a9 100644
--- a/src/lib/components/scoring/ShareBadge.svelte
+++ b/src/lib/components/scoring/ShareBadge.svelte
@@ -4,7 +4,6 @@
 
 	let { open = $bindable(false) }: { open: boolean } = $props();
 
-	let copied = $state(false);
 	let badgeSvgEl: SVGSVGElement | undefined = $state();
 
 	const avgScore = $derived(scoresStore.averageScore);
@@ -40,12 +39,11 @@
 	const dashOffset = $derived(circumference - (avgScore / 100) * circumference);
 
 	const shareText = $derived(
-		`Just scored ${avgScore}/100 on ATS Screener, a free open-source tool that simulates how real ATS platforms like Workday, Taleo, and Greenhouse parse your resume.\n\n${passCount}/${totalCount} systems passed. Check yours at ats-screener.vercel.app`
+		`Just scored ${avgScore}/100 on ATS Screener, a free open-source resume tool by linkedin.com/in/sunny-patel-30b460204 that simulates how real ATS platforms (Workday, Taleo, iCIMS, Greenhouse, Lever, and SuccessFactors) parse your resume.\n\n${passCount}/${totalCount} systems passed. Try it free at ats-screener.vercel.app\n\n#ATSScreener #Resume #JobSearch #OpenSource #CareerTips`
 	);
 
 	function close() {
 		open = false;
-		copied = false;
 	}
 
 	function handleBackdropClick(e: MouseEvent) {
@@ -80,7 +78,9 @@
 				if (!blob) return;
 				const a = document.createElement('a');
 				a.href = URL.createObjectURL(blob);
-				a.download = `ats-badge-${avgScore}-${new Date().toISOString().slice(0, 10)}.png`;
+				const d = new Date();
+				const dateStr = d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).replace(',', '');
+				a.download = `${displayName} - ATS Screener Badge - ${dateStr}.png`;
 				a.click();
 				URL.revokeObjectURL(a.href);
 			}, 'image/png');
@@ -91,7 +91,7 @@
 	}
 
 	function shareToLinkedIn() {
-		const url = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent('https://ats-screener.vercel.app')}`;
+		const url = `https://www.linkedin.com/feed/?shareActive=true&text=${encodeURIComponent(shareText)}`;
 		window.open(url, '_blank', 'noopener,noreferrer');
 	}
 
@@ -103,25 +103,6 @@
 		window.open(url, '_blank', 'noopener,noreferrer');
 	}
 
-	async function copyShareText() {
-		try {
-			await navigator.clipboard.writeText(shareText);
-			copied = true;
-			setTimeout(() => (copied = false), 2000);
-		} catch {
-			// fallback
-			const ta = document.createElement('textarea');
-			ta.value = shareText;
-			ta.style.position = 'fixed';
-			ta.style.opacity = '0';
-			document.body.appendChild(ta);
-			ta.select();
-			document.execCommand('copy');
-			document.body.removeChild(ta);
-			copied = true;
-			setTimeout(() => (copied = false), 2000);
-		}
-	}
 </script>
 
 {#if open}
@@ -144,29 +125,29 @@
 					<svg
 						bind:this={badgeSvgEl}
 						xmlns="http://www.w3.org/2000/svg"
-						width="600"
-						height="820"
-						viewBox="0 0 600 820"
+						width="520"
+						height="720"
+						viewBox="0 0 520 720"
 						class="badge-svg"
 					>
 						<defs>
-							<linearGradient id="badge-bgGrad" x1="0" y1="0" x2="1" y2="1">
-								<stop offset="0%" stop-color="#0a0a1a" />
-								<stop offset="50%" stop-color="#0d0d28" />
-								<stop offset="100%" stop-color="#0a0a1a" />
+							<linearGradient id="badge-bgGrad" x1="0" y1="0" x2="0.5" y2="1">
+								<stop offset="0%" stop-color="#0c0c20" />
+								<stop offset="50%" stop-color="#0a0a1a" />
+								<stop offset="100%" stop-color="#0e0b1e" />
 							</linearGradient>
 							<linearGradient id="badge-accentGrad" x1="0" y1="0" x2="1" y2="1">
 								<stop offset="0%" stop-color="#06b6d4" />
 								<stop offset="50%" stop-color="#3b82f6" />
 								<stop offset="100%" stop-color="#8b5cf6" />
 							</linearGradient>
-							<linearGradient id="badge-scoreGlow" x1="0" y1="0" x2="0" y2="1">
-								<stop offset="0%" stop-color={scoreColor} stop-opacity="0.4" />
-								<stop offset="100%" stop-color={scoreColor} stop-opacity="0" />
+							<linearGradient id="badge-borderGrad" x1="0" y1="0" x2="1" y2="1">
+								<stop offset="0%" stop-color="#06b6d4" stop-opacity="0.6" />
+								<stop offset="25%" stop-color="#3b82f6" stop-opacity="0.2" />
+								<stop offset="50%" stop-color="#8b5cf6" stop-opacity="0.6" />
+								<stop offset="75%" stop-color="#3b82f6" stop-opacity="0.2" />
+								<stop offset="100%" stop-color="#06b6d4" stop-opacity="0.6" />
 							</linearGradient>
-							<filter id="badge-glassBlur">
-								<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-							</filter>
 							<filter id="badge-glow">
 								<feGaussianBlur stdDeviation="6" result="blur" />
 								<feMerge>
@@ -174,42 +155,51 @@
 									<feMergeNode in="SourceGraphic" />
 								</feMerge>
 							</filter>
+							<filter id="badge-sealGlow">
+								<feGaussianBlur stdDeviation="3" result="blur" />
+								<feMerge>
+									<feMergeNode in="blur" />
+									<feMergeNode in="SourceGraphic" />
+								</feMerge>
+							</filter>
 							<clipPath id="badge-cardClip">
-								<rect x="0" y="0" width="600" height="820" rx="32" ry="32" />
+								<rect x="4" y="4" width="512" height="712" rx="28" ry="28" />
 							</clipPath>
 						</defs>
 
-						<!-- card background -->
-						<rect width="600" height="820" rx="32" ry="32" fill="url(#badge-bgGrad)" />
+						<!-- gradient border frame -->
+						<rect width="520" height="720" rx="30" ry="30" fill="url(#badge-borderGrad)" />
+
+						<!-- inner card background -->
+						<rect x="4" y="4" width="512" height="712" rx="28" ry="28" fill="url(#badge-bgGrad)" />
 
 						<!-- subtle grid pattern -->
-						<g opacity="0.03" clip-path="url(#badge-cardClip)">
-							{#each Array(20) as _, i}
-								<line x1="0" y1={i * 42} x2="600" y2={i * 42} stroke="white" stroke-width="0.5" />
-								<line x1={i * 32} y1="0" x2={i * 32} y2="820" stroke="white" stroke-width="0.5" />
+						<g opacity="0.025" clip-path="url(#badge-cardClip)">
+							{#each Array(18) as _, i}
+								<line x1="4" y1={i * 42} x2="516" y2={i * 42} stroke="white" stroke-width="0.5" />
+								<line x1={i * 30 + 4} y1="4" x2={i * 30 + 4} y2="716" stroke="white" stroke-width="0.5" />
 							{/each}
 						</g>
 
 						<!-- top accent bar gradient -->
-						<rect x="0" y="0" width="600" height="4" rx="0" fill="url(#badge-accentGrad)" clip-path="url(#badge-cardClip)" />
+						<rect x="4" y="4" width="512" height="3" fill="url(#badge-accentGrad)" clip-path="url(#badge-cardClip)" />
 
-						<!-- decorative corner accents -->
-						<circle cx="540" cy="60" r="120" fill="#06b6d4" opacity="0.03" />
-						<circle cx="60" cy="760" r="100" fill="#8b5cf6" opacity="0.03" />
+						<!-- decorative corner glows -->
+						<circle cx="480" cy="50" r="100" fill="#06b6d4" opacity="0.025" />
+						<circle cx="40" cy="670" r="80" fill="#8b5cf6" opacity="0.025" />
 
 						<!-- branding header -->
-						<g transform="translate(300, 60)">
+						<g transform="translate(260, 52)">
 							<!-- shield icon -->
-							<g transform="translate(-10, 0)">
+							<g transform="translate(-72, 0)">
 								<path
-									d="M0-16 L-10-10 L-10 2 C-10 10 0 16 0 16 C0 16 10 10 10 2 L10-10 Z"
-									fill="none"
+									d="M0-14 L-9-9 L-9 2 C-9 9 0 14 0 14 C0 14 9 9 9 2 L9-9 Z"
+									fill="rgba(6,182,212,0.08)"
 									stroke="url(#badge-accentGrad)"
 									stroke-width="1.5"
-									opacity="0.8"
 								/>
 								<path
-									d="M-4 0 L-1 3 L5 -3"
+									d="M-3.5 0.5 L-1 3 L4.5 -2.5"
 									fill="none"
 									stroke="#06b6d4"
 									stroke-width="1.5"
@@ -218,24 +208,43 @@
 								/>
 							</g>
 							<text
-								x="16"
+								x="-52"
 								y="5"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="16"
+								font-size="15"
 								font-weight="700"
 								fill="rgba(255,255,255,0.9)"
 								text-anchor="start"
-								letter-spacing="0.08em"
+								letter-spacing="0.1em"
 							>ATS SCREENER</text>
 						</g>
 
-						<!-- divider -->
-						<line x1="100" y1="95" x2="500" y2="95" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+						<!-- thin divider -->
+						<line x1="80" y1="84" x2="440" y2="84" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+
+						<!-- verification seal watermark (top right) -->
+						<g transform="translate(430, 130)" opacity="0.06">
+							<circle cx="0" cy="0" r="36" fill="none" stroke="white" stroke-width="1" />
+							<circle cx="0" cy="0" r="28" fill="none" stroke="white" stroke-width="0.5" />
+							{#each Array(12) as _, i}
+								{@const angle = (i * 30 * Math.PI) / 180}
+								<line
+									x1={Math.cos(angle) * 28}
+									y1={Math.sin(angle) * 28}
+									x2={Math.cos(angle) * 36}
+									y2={Math.sin(angle) * 36}
+									stroke="white"
+									stroke-width="1"
+								/>
+							{/each}
+							<text x="0" y="2" font-family="system-ui, sans-serif" font-size="7" fill="white" text-anchor="middle" dominant-baseline="central" font-weight="700" letter-spacing="0.1em">VERIFIED</text>
+						</g>
 
 						<!-- score ring section -->
-						<g transform="translate(300, 250)">
-							<!-- outer glow ring -->
-							<circle cx="0" cy="0" r="80" fill="none" stroke={scoreColor} stroke-width="1" opacity="0.1" />
+						<g transform="translate(260, 210)">
+							<!-- outer decorative ring -->
+							<circle cx="0" cy="0" r="82" fill="none" stroke={scoreColor} stroke-width="0.5" opacity="0.15" />
+							<circle cx="0" cy="0" r="86" fill="none" stroke={scoreColor} stroke-width="0.5" opacity="0.08" stroke-dasharray="4 8" />
 
 							<!-- background track -->
 							<circle
@@ -244,7 +253,7 @@
 								r="58"
 								fill="none"
 								stroke="rgba(255,255,255,0.05)"
-								stroke-width="8"
+								stroke-width="10"
 							/>
 
 							<!-- score progress arc -->
@@ -254,7 +263,7 @@
 								r="58"
 								fill="none"
 								stroke={scoreColor}
-								stroke-width="8"
+								stroke-width="10"
 								stroke-dasharray={circumference}
 								stroke-dashoffset={dashOffset}
 								stroke-linecap="round"
@@ -267,7 +276,7 @@
 								x="0"
 								y="-8"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="56"
+								font-size="52"
 								font-weight="800"
 								fill={scoreColor}
 								text-anchor="middle"
@@ -277,9 +286,9 @@
 							<!-- /100 label -->
 							<text
 								x="0"
-								y="28"
+								y="26"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="14"
+								font-size="13"
 								font-weight="500"
 								fill="rgba(255,255,255,0.35)"
 								text-anchor="middle"
@@ -288,24 +297,24 @@
 
 						<!-- verdict -->
 						<text
-							x="300"
-							y="365"
+							x="260"
+							y="328"
 							font-family="system-ui, -apple-system, sans-serif"
-							font-size="22"
+							font-size="20"
 							font-weight="700"
 							fill={scoreColor}
 							text-anchor="middle"
-							letter-spacing="0.06em"
+							letter-spacing="0.08em"
 						>{scoreLabel.toUpperCase()}</text>
 
 						<!-- systems passed pill -->
-						<g transform="translate(300, 405)">
-							<rect x="-70" y="-16" width="140" height="32" rx="16" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+						<g transform="translate(260, 365)">
+							<rect x="-72" y="-14" width="144" height="28" rx="14" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.08)" stroke-width="1" />
 							<text
 								x="0"
 								y="1"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="13"
+								font-size="12"
 								font-weight="600"
 								fill="rgba(255,255,255,0.7)"
 								text-anchor="middle"
@@ -314,26 +323,25 @@
 						</g>
 
 						<!-- divider -->
-						<line x1="120" y1="455" x2="480" y2="455" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+						<line x1="80" y1="405" x2="440" y2="405" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
 
-						<!-- details section -->
-						<!-- name -->
-						<g transform="translate(300, 500)">
+						<!-- candidate name -->
+						<g transform="translate(260, 444)">
 							<text
 								x="0"
 								y="0"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="11"
+								font-size="10"
 								font-weight="600"
 								fill="rgba(255,255,255,0.3)"
 								text-anchor="middle"
-								letter-spacing="0.12em"
+								letter-spacing="0.14em"
 							>CANDIDATE</text>
 							<text
 								x="0"
-								y="26"
+								y="24"
 								font-family="system-ui, -apple-system, sans-serif"
-								font-size="20"
+								font-size="19"
 								font-weight="600"
 								fill="rgba(255,255,255,0.9)"
 								text-anchor="middle"
@@ -341,80 +349,50 @@
 						</g>
 
 						<!-- mode + date row -->
-						<g transform="translate(300, 575)">
-							<!-- mode -->
-							<g transform="translate(-100, 0)">
-								<text
-									x="0"
-									y="0"
-									font-family="system-ui, -apple-system, sans-serif"
-									font-size="10"
-									font-weight="600"
-									fill="rgba(255,255,255,0.3)"
-									text-anchor="middle"
-									letter-spacing="0.1em"
-								>MODE</text>
-								<text
-									x="0"
-									y="22"
-									font-family="system-ui, -apple-system, sans-serif"
-									font-size="14"
-									font-weight="500"
-									fill="#06b6d4"
-									text-anchor="middle"
-								>{modeLabel}</text>
+						<g transform="translate(260, 510)">
+							<g transform="translate(-90, 0)">
+								<text x="0" y="0" font-family="system-ui, -apple-system, sans-serif" font-size="9" font-weight="600" fill="rgba(255,255,255,0.3)" text-anchor="middle" letter-spacing="0.12em">MODE</text>
+								<text x="0" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="#06b6d4" text-anchor="middle">{modeLabel}</text>
 							</g>
-							<!-- date -->
-							<g transform="translate(100, 0)">
-								<text
-									x="0"
-									y="0"
-									font-family="system-ui, -apple-system, sans-serif"
-									font-size="10"
-									font-weight="600"
-									fill="rgba(255,255,255,0.3)"
-									text-anchor="middle"
-									letter-spacing="0.1em"
-								>SCAN DATE</text>
-								<text
-									x="0"
-									y="22"
-									font-family="system-ui, -apple-system, sans-serif"
-									font-size="14"
-									font-weight="500"
-									fill="rgba(255,255,255,0.7)"
-									text-anchor="middle"
-								>{scanDate}</text>
+							<line x1="0" y1="-8" x2="0" y2="24" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+							<g transform="translate(90, 0)">
+								<text x="0" y="0" font-family="system-ui, -apple-system, sans-serif" font-size="9" font-weight="600" fill="rgba(255,255,255,0.3)" text-anchor="middle" letter-spacing="0.12em">SCAN DATE</text>
+								<text x="0" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500" fill="rgba(255,255,255,0.7)" text-anchor="middle">{scanDate}</text>
 							</g>
 						</g>
 
+						<!-- divider before scores -->
+						<line x1="80" y1="550" x2="440" y2="550" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+
 						<!-- individual system scores -->
-						<g transform="translate(300, 640)">
+						<g transform="translate(260, 582)">
 							{#each scoresStore.results as result, i}
 								{@const col = i % 3}
 								{@const row = Math.floor(i / 3)}
-								{@const x = (col - 1) * 160}
-								{@const y = row * 36}
+								{@const x = (col - 1) * 148}
+								{@const y = row * 34}
 								<g transform="translate({x}, {y})">
 									<rect
-										x="-68"
-										y="-12"
-										width="136"
-										height="24"
+										x="-64"
+										y="-11"
+										width="128"
+										height="22"
 										rx="6"
 										fill="rgba(255,255,255,0.02)"
+										stroke="rgba(255,255,255,0.03)"
+										stroke-width="0.5"
 									/>
 									<text
-										x="-58"
+										x="-54"
 										y="1"
 										font-family="system-ui, -apple-system, sans-serif"
-										font-size="10"
+										font-size="9.5"
 										font-weight="500"
 										fill="rgba(255,255,255,0.5)"
 										dominant-baseline="central"
 									>{result.system}</text>
 									<text
-										x="58"
+										x="54"
 										y="1"
 										font-family="system-ui, -apple-system, sans-serif"
 										font-size="11"
@@ -427,27 +405,28 @@
 							{/each}
 						</g>
 
-						<!-- footer -->
-						<line x1="80" y1="730" x2="520" y2="730" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+						<!-- footer divider -->
+						<line x1="60" y1="656" x2="460" y2="656" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
 
+						<!-- footer -->
 						<text
-							x="300"
-							y="760"
+							x="260"
+							y="682"
 							font-family="system-ui, -apple-system, sans-serif"
-							font-size="12"
+							font-size="11"
 							font-weight="500"
 							fill="#06b6d4"
 							text-anchor="middle"
-							opacity="0.7"
+							opacity="0.6"
 						>ats-screener.vercel.app</text>
 
 						<text
-							x="300"
-							y="785"
+							x="260"
+							y="702"
 							font-family="system-ui, -apple-system, sans-serif"
-							font-size="9"
+							font-size="8"
 							font-weight="400"
-							fill="rgba(255,255,255,0.2)"
+							fill="rgba(255,255,255,0.18)"
 							text-anchor="middle"
 						>Not an official ATS certification</text>
 					</svg>
@@ -480,20 +459,6 @@
 						Add to LinkedIn Profile
 					</button>
 
-					<button class="action-btn secondary" onclick={copyShareText}>
-						{#if copied}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2">
-								<polyline points="20,6 9,17 4,12" />
-							</svg>
-							<span class="copied-text">Copied!</span>
-						{:else}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-								<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-								<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-							</svg>
-							Copy Share Text
-						{/if}
-					</button>
 				</div>
 			</div>
 		</div>
@@ -656,10 +621,6 @@
 		border-color: rgba(255, 255, 255, 0.15);
 	}
 
-	.copied-text {
-		color: #22c55e;
-	}
-
 	/* scrollbar styling for the dialog */
 	.badge-dialog::-webkit-scrollbar {
 		width: 4px;