style: enhance toolbar with glassmorphism and improved design

- Add white background with subtle gray border and rounded corners
- Remove initial drop shadow, add shadow on hover
- Reduce vertical padding for more compact design
- Update button hover states to use darker gray
- Add sticky positioning with gap from top
- Improve responsive padding and animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/components/admin/composer/ComposerToolbar.svelte

@@ -40,6 +40,7 @@
 </script>
 
 <div class="editor-toolbar">
+	<div class="toolbar-container">
 		<div class="edra-toolbar">
 			<!-- Text Style Dropdown -->
 			<div class="text-style-dropdown">
@@ -143,6 +144,7 @@
 				/>
 			{/if}
 		</div>
+	</div>
 </div>
 
 <style lang="scss">
@@ -150,23 +152,59 @@
 	@import '$styles/mixins';
 
 	.editor-toolbar {
-		border-bottom: 1px solid $gray-90;
-		background: $white;
 		position: sticky;
-		top: 0;
+		top: $unit;
-		z-index: 10;
+		z-index: 20;
-		padding: $unit 0;
+		padding: $unit $unit-2x;
+		margin: 0 0 $unit-2x 0;
+		background: rgba($white, 0.98);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba($gray-90, 0.2);
+		border-radius: $corner-radius-md;
+		box-shadow: none;
+		transition: all 0.2s ease;
+		animation: slideDown 0.3s ease-out;
+
+		&:hover {
+			background: $white;
+			border-color: rgba($gray-85, 0.3);
+			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+		}
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.toolbar-container {
+		max-width: $page-width;
+		margin: 0 auto;
+		padding: 0 $unit-2x;
+
+		@include breakpoint('phone') {
+			padding: 0;
+		}
 	}
 
 	.edra-toolbar {
 		display: flex;
 		align-items: center;
-		gap: 4px;
+		gap: 6px;
 		padding: 0 $unit-6x;
 		flex-wrap: wrap;
+		height: 44px;
 
 		@include breakpoint('phone') {
 			padding: 0 $unit-4x;
+			gap: 4px;
 		}
 	}
 
@@ -179,35 +217,76 @@
 		display: flex;
 		align-items: center;
 		gap: 4px;
-		padding: 6px 10px;
+		padding: 6px 12px;
-		background: transparent;
+		background: rgba($gray-95, 0.5);
-		border: 1px solid transparent;
+		border: 1px solid rgba($gray-85, 0.3);
 		border-radius: $corner-radius;
-		font-size: 14px;
+		font-size: 13px;
+		font-weight: 500;
 		color: $gray-10;
 		cursor: pointer;
-		transition: all 0.2s ease;
+		transition: all 0.15s ease;
+		height: 32px;
 
 		&:hover {
-			background: $gray-95;
+			background: rgba($gray-90, 0.8);
-			border-color: $gray-85;
+			border-color: rgba($gray-80, 0.5);
+			transform: translateY(-1px);
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 		}
 
 		&:active {
-			background: $gray-90;
+			background: rgba($gray-85, 0.9);
+			transform: translateY(0);
+			box-shadow: none;
 		}
 
 		svg {
-			width: 12px;
+			width: 10px;
-			height: 12px;
+			height: 10px;
-			opacity: 0.5;
+			opacity: 0.6;
 		}
 	}
 
 	.separator {
 		width: 1px;
-		height: 20px;
+		height: 24px;
-		background: $gray-85;
+		background: rgba($gray-85, 0.3);
-		margin: 0 4px;
+		margin: 0 6px;
+		opacity: 0.6;
+	}
+
+	// Override edra toolbar icon styles for floating appearance
+	:global(.editor-toolbar .edra-command-button) {
+		min-width: 32px;
+		min-height: 32px;
+		background-color: transparent;
+		border-radius: $corner-radius;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background-color: rgba($gray-85, 0.6);
+			transform: translateY(-1px);
+		}
+
+		&:active {
+			background-color: rgba($gray-85, 0.7);
+			transform: translateY(0);
+		}
+
+		&.active {
+			background-color: rgba($blue-50, 0.1);
+			color: $blue-40;
+
+			&:hover {
+				background-color: rgba($blue-50, 0.15);
+			}
+		}
+	}
+
+	:global(.editor-toolbar .edra-toolbar-icon) {
+		width: 16px;
+		height: 16px;
+		stroke-width: 2px;
 	}
 </style>