.popover-container.svelte-8l1svu {
		position: relative;
	}
	.popover-3d {
		z-index: 9999;
		position: relative;
		transform: translateZ(50px) rotateX(-2deg);
	}
	.badge-shimmer.svelte-8l1svu {
		position: relative;
	}
	.badge-shimmer.svelte-8l1svu::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: inherit;
		background: radial-gradient(
			100px circle at calc(var(--mouse-x, 0.5) * 50%) calc(var(--mouse-y, 0.5) * 100%),
			rgba(255, 255, 255, 0.1) 0%,
			transparent 50%
		);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
		z-index: 1;
	}
	.new-card:hover .badge-shimmer.svelte-8l1svu::after {
		opacity: 1;
	}
	@media (prefers-color-scheme: light) {
		.badge-shimmer.svelte-8l1svu::after {
			background: radial-gradient(
				100px circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
				rgba(0, 0, 255, 0.1) 0%,
				transparent 50%
			);
			mix-blend-mode: overlay;
		}
	}

	.spline-wrapper.svelte-1uctgtq {
		position: absolute;
		top: 0px;
		right: -16px;
		width: 100%;
		height: 250px;
		clip-path: url(#card-clip);
		overflow: hidden;
		z-index: 10;
	}
	.spline-wrapper.svelte-1uctgtq > :where(.svelte-1uctgtq) {
		position: absolute;
		top: -150px;
		right: -200px;
		width: 300px;
		height: 100%;
		transform: scale(0.8);
	}
	.profile-card-container.svelte-1uctgtq {
		perspective: 1200px;
		container-type: inline-size;
	}

	.profile-card.svelte-1uctgtq {
		width: 100%;
		border-radius: 8px;
		position: relative;
		transition: all 0.2s linear;
		transform-style: preserve-3d;
		padding: 3px;
		perspective: 1000px;
		border: 1px solid var(--color-border);
		isolation: isolate;
		/* Tilt effect */
		transform: perspective(1000px) rotateX(calc((var(--mouse-y, 0.5) - 0.5) * -5deg))
			rotateY(calc((var(--mouse-x, 0.5) - 0.5) * 5deg));
		/* Box shadow with mouse effects */
		box-shadow:
			var(--shadow-md),
			0 calc(5px + (var(--mouse-y, 0.5) - 0.5) * 20px)
				calc(20px + (var(--mouse-y, 0.5) - 0.5) * 40px) rgba(74, 158, 255, 0.1);
		/* Base holographic background */
		background: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.01' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E")
			var(--border);
		.container:where(.svelte-1uctgtq) {
			border: 1px solid var(--color-border);
			box-shadow: var(--shadow-sm);
		}
	}
	.profile-card-container.svelte-1uctgtq:hover .profile-card:where(.svelte-1uctgtq) {
		background:
			radial-gradient(
				500px circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
				rgba(0, 240, 255, 0.2) 0 12%,
				rgba(0, 255, 135, 0.2) 24%,
				rgba(255, 230, 0, 0.2) 36%,
				rgba(255, 90, 0, 0.2) 48%,
				rgba(255, 0, 195, 0.2) 62%,
				rgba(90, 0, 255, 0.2) 74%,
				transparent 100%
			),
			url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E")
				var(--color-background);
	}
	@media (prefers-color-scheme: light) {
		.profile-card-container.svelte-1uctgtq:hover .profile-card:where(.svelte-1uctgtq) {
			background:
				radial-gradient(
					500px circle at calc(var(--mouse-x, 0.5) * 100%)
						calc(var(--mouse-y, 0.5) * 100%),
					rgba(0, 240, 255, 0.2) 0 12%,
					rgba(0, 255, 135, 0.2) 24%,
					rgba(255, 230, 0, 0.2) 36%,
					rgba(255, 90, 0, 0.2) 48%,
					rgba(255, 0, 195, 0.2) 62%,
					rgba(90, 0, 255, 0.2) 74%,
					transparent 100%
				),
				url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23CCCCCC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E")
					var(--color-background);
		}
	}
	.profile-card.svelte-1uctgtq::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1000;
		background: radial-gradient(
			500px circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0.2) 30%,
			rgba(255, 255, 255, 0.1) 50%,
			transparent 70%
		);
		opacity: 0;
		transition: opacity 0.2s ease;
		mix-blend-mode: overlay;
		border-radius: 8px;
	}
	.profile-card-container.svelte-1uctgtq:hover .profile-card:where(.svelte-1uctgtq)::before {
		opacity: 1;
	}
	.container.svelte-1uctgtq {
		display: grid;
		grid-template-columns: 18px 15px 96px 1fr 15px;
		grid-template-rows:
			70px 96px auto var(--stats-row, 120px) var(--client-usage-row, 0px)
			15px;
		column-gap: 1px;
		row-gap: 1px;
		min-height: 100%;
		overflow: visible;
		border-radius: 6px;
		transform-style: preserve-3d;
		max-width: 100%;
	}
	.vertical-line.svelte-1uctgtq {
		position: absolute;
		top: 0;
		left: 130px;
		width: 1px;
		height: 100%;
		border-left: 1px dashed var(--color-border);
		z-index: 9999;
	}
	.cell.svelte-1uctgtq {
		position: relative;
		background-color: var(--color-background);
	}
	.vertical-text.svelte-1uctgtq {
		position: relative;
		color: color-mix(in srgb, var(--color-foreground), var(--color-background) 90%);
		writing-mode: sideways-lr;
		text-align: right;
		padding-top: 5px;
		padding-right: 5px;
		font-size: 10px;
		letter-spacing: 0.3px;
		font-weight: 600;
		text-transform: uppercase;
		mix-blend-mode: darken;
		line-height: 20px;
	}
	.avatar.svelte-1uctgtq {
		grid-area: 2 / 3 / 3 / 4;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		position: relative;
	}
	.logo.svelte-1uctgtq {
		grid-area: 1 / 1 / 2 / 5;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-left: 12px;
		border-radius: 4px 0 0 0;
		svg {
			opacity: 0.25;
		}
	}
	.name.svelte-1uctgtq {
		grid-area: 3 / 3 / 4 / 5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0;
		padding-bottom: 20px;
		padding-top: 20px;
		padding-right: 20px;

		position: relative;
	}
	.name.svelte-1uctgtq h1:where(.svelte-1uctgtq) {
		color: var(--color-foreground);
		font-weight: 400;
		font-size: 28px;
		margin: 0;
		line-height: 1;
		padding-right: 50px;
		position: relative;
		z-index: 20;
	}
	.username.svelte-1uctgtq {
		font-size: 14px;
		font-weight: 400;
		margin: 0;
		line-height: 1;
		margin-top: 8px;
	}
	.activity.svelte-1uctgtq {
		grid-area: 4 / 3 / 5 / 5;
		display: grid;
		grid-template-columns: 100px auto;
		grid-template-rows: auto repeat(3, 1fr);
		padding-bottom: 16px;
		gap: 8px;
		align-items: center;
		background-position-y: 17px;
		background-image: url('data:image/svg+xml,<svg width="4" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 28H28" stroke="rgba(135, 139, 134, 0.2)" stroke-dasharray="2 2"/></svg>');
	}
	@container (max-width: 768px) {
		.activity.svelte-1uctgtq {
			grid-template-columns: 100px 1fr;
		}
	}
	.activity-group.svelte-1uctgtq {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
		.activity-count:where(.svelte-1uctgtq) {
			color: var(--foreground);
			font-size: 16px;
			font-weight: 400;
			line-height: 1;
			background-color: var(--color-background);
		}
		.activity-label:where(.svelte-1uctgtq) {
			color: var(--secondary-foreground);
			opacity: 0.8;
			background-color: var(--color-background);
			font-size: 10px;
			padding: 0 5px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			line-height: 1;
			margin-top: 1px;
		}
	}
	.messages.svelte-1uctgtq {
		grid-area: 2 / 1 / 3 / 2;
	}
	.threads.svelte-1uctgtq {
		grid-area: 3 / 1 / 4 / 2;
	}
	.xp.svelte-1uctgtq {
		grid-area: 4 / 1 / 5 / 2;
	}
	.activity-calendar.svelte-1uctgtq {
		grid-area: 1 / 1 / 2 / 3;
		border-bottom: 1px dashed var(--color-border);
		background-color: var(--color-background);
		position: relative;
		z-index: 10000;
	}
	.lines-label.svelte-1uctgtq {
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		line-height: 1;
		margin-top: 1px;
		opacity: 0.8;
	}
	.lines-count.svelte-1uctgtq {
		font-size: 16px;
		line-height: 1;
		font-weight: 400;
	}
	.lines-added.svelte-1uctgtq {
		grid-area: 2 / 2;
		color: var(--success);
		font-size: 14px;
		font-weight: 500;
		background-color: var(--color-background);
		padding: 0 5px 0 5px;
		display: flex;
		justify-self: start;
		flex-direction: row;
		align-items: center;
		gap: 5px;
	}
	.lines-deleted.svelte-1uctgtq {
		grid-area: 3 / 2;
		color: var(--destructive);
		padding: 0 5px 0 5px;
		font-size: 14px;
		font-weight: 500;
		background-color: var(--color-background);
		display: flex;
		justify-self: start;
		flex-direction: row;
		align-items: center;
		gap: 5px;
	}
	@container (max-width: 500px) {
		.lines-deleted.svelte-1uctgtq {
			justify-self: center;
		}
	}
	.lines-changed.svelte-1uctgtq {
		grid-area: 4 / 2;
		color: var(--warning);
		padding: 0 5px 0 5px;
		font-size: 14px;
		font-weight: 500;
		background-color: var(--color-background);
		display: flex;
		justify-self: start;
		flex-direction: row;
		align-items: center;
		gap: 5px;
	}
	@container (max-width: 500px) {
		.lines-changed.svelte-1uctgtq {
			justify-self: end;
		}
	}
	.client-usage-cell.svelte-1uctgtq {
		grid-area: 5 / 3 / 6 / 5;
		display: flex;
		align-items: center;
		padding: 10px 0;
	}
	.client-usage-title.svelte-1uctgtq {
		grid-area: 5 / 1 / 6 / 2;
	}
	.client-usage-spacer.svelte-1uctgtq {
		grid-area: 5 / 2 / 6 / 3;
	}
	.avatar-title.svelte-1uctgtq {
		grid-area: 2 / 1 / 3 / 2;
	}
	.id-title-1.svelte-1uctgtq {
		grid-area: 3 / 1 / 4 / 2;
	}
	.activity-title.svelte-1uctgtq {
		grid-area: 4 / 1 / 5 / 2;
		padding-top: 20px;
	}

	.area-1.svelte-1uctgtq {
		grid-area: 6 / 1 / 7 / 2;
		border-radius: 0 0 0 4px;
	}
	.area-2.svelte-1uctgtq {
		grid-area: 6 / 2 / 7 / 3;
	}
	.area-3.svelte-1uctgtq {
		grid-area: 6 / 3 / 7 / 4;
	}
	.area-4.svelte-1uctgtq {
		grid-area: 6 / 4 / 7 / 5;
	}

	.area-10.svelte-1uctgtq {
		grid-area: 4 / 2 / 5 / 3;
	}
	.area-11.svelte-1uctgtq {
		grid-area: 3 / 2 / 4 / 3;
	}
	.area-12.svelte-1uctgtq {
		grid-area: 2 / 2 / 3 / 3;
	}
	.area-14.svelte-1uctgtq {
		grid-area: 1 / 4 / 2 / 5;
	}
	.area-15.svelte-1uctgtq {
		grid-area: 2 / 4 / 3 / 5;
	}
	.area-16.svelte-1uctgtq {
		grid-area: 1 / 5 / 2 / 6;
	}
	.user-id.svelte-1uctgtq {
		grid-area: 1 / 5 / 7 / 6;
		writing-mode: vertical-rl;
		text-align: center;
		white-space: nowrap;
		font-weight: 500;
		letter-spacing: 0.3px;
		padding-right: 3px;
		line-height: 8px;
		font-size: 10px;
		color: color-mix(in srgb, var(--color-foreground), var(--color-background) 90%);
		overflow: hidden;
		height: 0;
		min-height: 100%;
		border-radius: 0 0 4px 0;
	}

	.hover-group.svelte-1uctgtq {
		position: relative;
	}

	.edit-profile-btn.svelte-1uctgtq {
		position: absolute;
		top: -4px;
		left: -10px;
		opacity: 0;
		gap: 4px;
		transition: all 0.25s ease;
		background: var(--color-background);
		border: 1px solid var(--color-border);
		border-radius: 4px;
		padding: 3px 6px;
		color: var(--color-muted-foreground);
		box-shadow: var(--shadow-md);
		z-index: 10;
		display: inline-flex;
		align-items: center;
		overflow: hidden;
		width: 26px;
	}

	.edit-profile-btn.svelte-1uctgtq:hover {
		width: max-content;
		color: var(--color-foreground);
	}

	/* Override the general hover rule */
	.hover-group.svelte-1uctgtq:hover .edit-profile-btn:where(.svelte-1uctgtq) {
		opacity: 0;
	}

	/* Show edit button only on specific element hovers */
	.avatar.svelte-1uctgtq:hover .edit-profile-btn:where(.svelte-1uctgtq),
	.name.svelte-1uctgtq:hover .edit-profile-btn:where(.svelte-1uctgtq) {
		opacity: 1;
	}

	.edit-label.svelte-1uctgtq {
		opacity: 0;
		transform: translateX(-3px);
		transition:
			opacity 0.1s ease,
			transform 0.3s ease;
		font-size: 11px;
		font-weight: 500;
		white-space: nowrap;
		pointer-events: none;
	}

	.edit-profile-btn.svelte-1uctgtq:hover .edit-label:where(.svelte-1uctgtq) {
		opacity: 1;
		transform: translateX(0);
	}

	.client-usage.svelte-1uctgtq {
		font-size: 10px;
		line-height: 1.4;
		color: var(--secondary-foreground);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}

	.client-usage-item.svelte-1uctgtq {
		white-space: nowrap;
	}