Polish Studio visuals

- Card-shaped loading skeletons with shimmer text lines
- Hover lift and accent shadow on furni cards
- Subtle dotted floor pattern behind previews and detail image
- Sticky action footer in the detail drawer
- Theme-aware slim scrollbars inside the admin panel
- Nicer empty state with icon tile

src/app/globals.css

@@ -211,6 +211,26 @@ summary,
 	background: transparent;
 }
 
+/* Theme-aware scrollbars inside the admin panel */
+[data-admin] ::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+[data-admin] ::-webkit-scrollbar-thumb {
+	background-color: color-mix(
+		in srgb,
+		var(--admin-text-muted) 32%,
+		transparent
+	);
+}
+[data-admin] ::-webkit-scrollbar-thumb:hover {
+	background-color: color-mix(
+		in srgb,
+		var(--admin-text-muted) 55%,
+		transparent
+	);
+}
+
 /* ── Atom theme components ────────────────────────────────── */
 @layer components {
 	.nav-item {

src/components/admin/studio/studio-client.tsx

@@ -849,8 +849,14 @@ export function StudioClient({
 								{Array.from({ length: 10 }, (_, i) => i).map((n) => (
 									<div
 										key={`skeleton-${n}`}
-										className="h-40 animate-pulse rounded-lg bg-[var(--admin-accent)]/10"
+										className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)]"
-									/>
+									>
+										<div className="h-24 animate-pulse bg-[var(--admin-accent)]/10" />
+										<div className="space-y-2 border-t border-[var(--admin-border)] p-2.5">
+											<div className="h-3 w-3/4 animate-pulse rounded bg-[var(--admin-accent)]/10" />
+											<div className="h-2.5 w-1/2 animate-pulse rounded bg-[var(--admin-accent)]/10" />
+										</div>
+									</div>
 								))}
 							</div>
 						) : error ? (
@@ -858,11 +864,21 @@ export function StudioClient({
 								{error}
 							</div>
 						) : filteredItems.length === 0 ? (
-							<div className="py-16 text-center">
+							<div className="flex flex-col items-center py-16 text-center">
-								<Search className="mx-auto mb-2 text-[var(--admin-text-muted)]" />
+								<div className="mb-3 grid h-14 w-14 place-items-center rounded-2xl border border-[var(--admin-border)] bg-[var(--admin-surface)]">
-								<p className="text-sm text-[var(--admin-text-muted)]">
+									<Search
+										size={22}
+										className="text-[var(--admin-text-muted)]"
+									/>
+								</div>
+								<p className="text-sm font-semibold text-[var(--admin-text)]">
 									{activeSearch
 										? `No furni found for "${activeSearch}"`
+										: "No furni to show yet"}
+								</p>
+								<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
+									{activeSearch
+										? "Try a different search or clear your filters."
 										: "Search a furni library to get started."}
 								</p>
 							</div>
@@ -882,10 +898,17 @@ export function StudioClient({
 															"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
 															isSel
 																? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10"
-																: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
+																: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
 														)}
 													>
-														<div className="relative flex h-24 items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--admin-surface)] to-[var(--admin-canvas)]">
+														<div
+															className="relative flex h-24 items-center justify-center overflow-hidden"
+															style={{
+																backgroundImage:
+																	"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
+																backgroundSize: "14px 14px",
+															}}
+														>
 															<img
 																src={getFurniImageUrl(item)}
 																alt={item.name}
@@ -1176,7 +1199,14 @@ export function StudioClient({
 						</div>
 
 						<div className="min-h-0 flex-1 overflow-y-auto p-4">
-							<div className="mb-4 grid h-40 place-items-center rounded-xl border border-[var(--admin-border)] bg-gradient-to-br from-[var(--admin-surface)] to-[var(--admin-canvas)]">
+							<div
+								className="mb-4 grid h-40 place-items-center overflow-hidden rounded-xl border border-[var(--admin-border)]"
+								style={{
+									backgroundImage:
+										"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
+									backgroundSize: "14px 14px",
+								}}
+							>
 								<img
 									src={getFurniImageUrl(detail)}
 									alt={detail.name}
@@ -1248,7 +1278,9 @@ export function StudioClient({
 									</div>
 								</div>
 							)}
+						</div>
 
+						<div className="shrink-0 border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-3">
 							<div className="space-y-2">
 								{!detail.alreadyImported ? (
 									<Button