Enhance UI layout and styles for LabelDesigner and MainPage components

web/src/styles/theme.scss

@@ -209,3 +209,105 @@
   --bs-progress-bg: var(--surface-1);
   --bs-progress-bar-bg: var(--fichero);
 }
+
+// ── Body background ────────────────────────────────────────────
+
+body {
+  min-height: 100dvh;
+  background-image:
+    radial-gradient(ellipse at 15% 85%, rgba(var(--fichero-rgb), 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 8%,  rgba(var(--fichero-rgb), 0.04) 0%, transparent 55%);
+  background-attachment: fixed;
+}
+
+// ── App header ─────────────────────────────────────────────────
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 1030;
+  padding: 7px 0;
+  background: rgba(22, 24, 25, 0.82);
+  backdrop-filter: blur(16px) saturate(1.5);
+  -webkit-backdrop-filter: blur(16px) saturate(1.5);
+  border-bottom: 1px solid var(--border-standard);
+  box-shadow: 0 1px 0 0 var(--border-soft);
+}
+
+.app-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.app-brand-logo {
+  height: 1.75em;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px var(--border-soft);
+}
+
+.app-brand-name {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--ink-primary);
+
+  em {
+    color: var(--fichero);
+    font-style: normal;
+  }
+}
+
+// ── Toolbar bar ────────────────────────────────────────────────
+
+.toolbar-bar {
+  background: var(--surface-1);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  padding: 7px 12px;
+
+  .btn-sm {
+    border-radius: var(--radius-sm) !important;
+  }
+}
+
+// ── Canvas panel ───────────────────────────────────────────────
+
+.canvas-panel {
+  display: inline-flex;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px var(--border-standard),
+    0 16px 48px rgba(0, 0, 0, 0.40),
+    0 4px 12px  rgba(0, 0, 0, 0.25);
+}
+
+// ── Scrollbar ─────────────────────────────────────────────────
+
+::-webkit-scrollbar        { width: 6px; height: 6px; }
+::-webkit-scrollbar-track  { background: var(--surface-0); }
+::-webkit-scrollbar-thumb  {
+  background: var(--surface-3);
+  border-radius: 3px;
+
+  &:hover { background: var(--ink-muted); }
+}
+
+// ── Transition helpers ─────────────────────────────────────────
+
+.btn { transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
+
+.btn-primary:not(:disabled):hover {
+  box-shadow: 0 0 0 3px rgba(var(--fichero-rgb), 0.25);
+}
+
+.btn-danger:not(:disabled):hover {
+  box-shadow: 0 0 0 3px rgba(var(--status-danger-rgb), 0.25);
+}